Non-single-file components refer to: one file contains multiple components.
Three steps to use components in Vue: 1. Create components, 2. Register components, 3. Use components.
Component usage process [Step 1: Create a component]
Create components using the Vue.extend() method:
// 第一步：创建 frameHead 组件
const FrameHead = Vue.extend({
name: "fhead",
template:`
<div>
<strong>{
{title}}</strong>
<span>{
{username}}</span>
</div>
`,
data(){
return {
title: "商城管理系统",
username: "张三"
}
}
})
// 第一步：创建 frameNav 组件【简写】
// const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象;
const FrameNav = {
template:`
<ul>
<li v-for="(item,index) in list" :key="index" @click="isHref(item)">
{
{item}}
</li>
</ul>
`,
data(){
return {
list: ["首页","用户管理","商品管理","轮播图管理"]
}
},
methods:{
isHref(name){
alert(`跳转至${name}`);
}
}
}Note : The content in Vue.extend() is basically the same as that in new Vue(), and you can also write data, methods, and computed properties. Their difference is:
- You cannot write el in a component, because all components must be managed by a Vue instance, and the Vue instance determines which container to serve.
- The data in the component must be written as a function, because it avoids the problem of data reference when the component is used multiple times (the problem of multiple components sharing a piece of data).
- The component needs to use the template to configure the structural content, and there must be a largest root element in the template to wrap all the content.
- You can use name to configure an alias in the component, which is often used for component cache filtering.
Component abbreviation: const component name = Vue.extend (configuration object) can be abbreviated as: const component name = configuration object
Component usage process [Step 1: Register component]
Partial registration: configure components option when using new Vue
const vm = new Vue({
el: "#APP",
// 第二步：注册组件（局部注册）
components:{
// FrameHead: FrameHead, 名称相同时可以简写
FrameHead,
FrameNav
},
data(){
return {
content: "网页内容"
}
}
});Note : The component name is specified when registering the component. For multiple words, you can name it MyCode with a big camel or my-code with a dash. In addition, when naming, try to avoid existing element names in HTML, for example: h2 and H2 are not acceptable.
Component usage process [Step 3: Use components]
<div id="APP">
<!-- 第三步：使用组件 -->
<frame-head></frame-head>
<hr/>
<!-- 第三步：使用组件 -->
<frame-nav></frame-nav>
<hr/>
<p>{
{content}}</p>
</div>Note : Using components is the same as using labels. If there are multiple words, you need to use a dash to name my-code, and you can also use a big hump to name MyCode in scaffolding. In addition, it can also be written in a single-label format in scaffolding, but when scaffolding is not used, writing in a single-label will cause subsequent components to fail to render.
Component usage process [full code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue2非单文件组件使用流程</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="APP">
<!-- 第三步：使用组件 -->
<frame-head></frame-head>
<hr />
<!-- 第三步：使用组件 -->
<frame-nav></frame-nav>
<hr />
<p>{
{content}}</p>
</div>
<script>
// 第一步：创建 frameHead 组件
const FrameHead = Vue.extend({
name: "fhead", // 定义别名
template: `
<div>
<strong>{
{title}}</strong>
<span>{
{username}}</span>
</div>
`,
data() {
return {
title: "商城管理系统",
username: "张三"
}
}
})
// 第一步：创建 frameNav 组件【简写】
// const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象;
const FrameNav = {
template: `
<ul>
<li v-for="(item,index) in list" :key="index" @click="isHref(item)">
{
{item}}
</li>
</ul>
`,
data() {
return {
list: ["首页", "用户管理", "商品管理", "轮播图管理"]
}
},
methods: {
isHref(name) {
alert(`跳转至${name}`);
}
}
}
const vm = new Vue({
el: "#APP",
// 第二步：注册组件（局部注册）
components: {
// FrameHead: FrameHead, 名称相同时可以简写
FrameHead,
FrameNav
},
data() {
return {
content: "网页内容"
}
}
});
</script>
</body>
</html>
Note : The advantage of component development is that each component is only responsible for one function, and each page can use this component, which can improve code reusability. In addition, the name defined by the name attribute of the component is displayed in the developer tool.
Original author: Wu Xiaotang
Creation time: 2023.5.12