014 vue的组件化开发
[A] 组件化开发
1. 组件化开发时Vue.js中一个重要思想
2. 组件的使用分三个步骤：
1. 创建组件构造器
2. 注册组件
3. 使用组件
[B] 组件化的基本使用
1. 创建组件构造器
Vue.extend()创建的是一个组件构造器，通常在创建组件构造器时，传入template代表我们自定义的组件的模板
该模板的内容就是要显示的html代码。这种写法已经被淘汰了，使用更多的是后面的语法糖
const cpn = Vue.extend({
template:`
<div>
<h2>这里是标题栏</h2>
<div>这里是内容部分</div>
</div>
`,
})
2. 注册组件
调用Vue.component()方法是将上一步的组件构造器注册为一个组件，并且去一个组件名
需要传入的参数有两个：1. 注册组件的标签名，2. 组件构造器
Vue.component("carrey-cpn", cpn);
3. 使用组件
组件必须挂载到Vue实例中才会生效，即自定义的组件必须在Vue管理的标签内部(Vue实例中)才会生效
<div id="app">
// 1. 该组件会生效
<carrey-cpn></carrey-cpn>
</div>
// 2. 该组件无法生效
<carrey-cpn></carrey-cpn>
var app = new Vue({
el: "#app",
data:{
msg: "你好啊我的朋友",
}
});
[C] 全局组件和局部组件
全局组件：全局组件可以在多个不同的Vue实例中使用
通过Vue.component()方法注册的组件为全局组件
示例：
Vue.component("carrey-cpn", cpn);
局部组件：局部组件只能在某一个实例内容使用
在某个Vue实例中内部注册的组件为局部组件，只能在当前Vue实例中使用
实例：
var app = new Vue({
el: "#app",
data:{
msg: "你好啊我的朋友",
},
components:{
carreyCpn: cpn,
}
});
[D] 父组件和子组件的区分
1. 在下述案例中，通过Vue.component()方法构造了两个自定义组件cpn1和cpn2
2. 其中，cpn1在cpn2中注册，cpn2在Vue实例中注册，
则cpn2是cpn1的父组件，cpn1是cpn2的子组件
则根组件(Vue实例)是cpn2的父组件，cpn2是根组件的子组件
3. 由于组件cpn1只在cpn2中注册过，没有在根组件中注册，所以cpn1只能在cpn2中使用，不能在根组件中使用
示例代码：
示例： // html代码 <div id="app"> <cpnc2></cpnc2> </div> // js代码 // 1. 创建组件构造器对象 // 组件1 const cpn1 = Vue.extend({ template:` <div> <h2>我是组件1</h2> <div>组件1的内容</div> </div> `, }) // 组件2 const cpn2 = Vue.extend({ template:` <div> <h2>我是组件2</h2> <div>组件2的内容</div> <cpnc1></cpnc1> </div> `, components:{ cpnc1: cpn1, } }) // 2. 注册组件 // root组件 var app = new Vue({ el: "#app", data:{ msg: "你好啊我的朋友", }, components:{ cpnc2: cpn2, } });
[E] 注册组件的语法糖写法
1. 注册组建的语法糖
按照之前的组件使用方法，使用一个组件需要三个步骤：创建组件构造器对象，注册组件和使用组件
Vue中为了简化组件使用的过程，提供了语法糖的写法，主要是省去了组件注册Vue.extend()的步骤，直接通过一个对象来代替
2. 使用组件的常规写法：
// 1. 创建组件构造器 const cpn = Vue.extend({ template:` <div> <h2>我是组件1</h2> <div>组件1的内容</div> </div> `, }) // 2. 注册组件 Vue.component("cpnc", cpn) // 3.使用组件 var app = new Vue({ el: "#app", data:{ msg: "你好啊我的朋友", }, });
3. 使用组件的语法糖写法：
注册全局组件 // 1，2. 注册并注册组件 Vue.component("cpnc",{ template:` <div> <h2>我是组件1</h2> <div>组件1的内容</div> </div> `, }) // 3.使用组件 var app = new Vue({ el: "#app", data:{ msg: "你好啊我的朋友", }, }); 注册局部组件： var app = new Vue({ el: "#app", data:{ msg: "你好啊我的朋友", }, components:{ "cpnc":{ template:` <div> <h2>我是组件1</h2> <div>组件1的内容</div> </div> `, } } });
[F] 组件模板的抽离
// 1. 创建组件模板 <script type="text/x-template" id="cpn"> <div> <h2>我是组件1111</h2> <div>组件1的内容</div> </div> <script> // 2. 注册组件 Vue.component("cpnc", { template: "#cpn" }) // 3.使用组件 var app = new Vue({ el: "#app", data:{ msg: "你好啊我的朋友", }, });
2. 将模板内容写在一个单独的<template>标签内，通过id号绑定对应的Vue示例
示例代码：
// 1. 创建组件模板 <template id="cpn"> <div> <h2>我是组件1111</h2> <div>组件1的内容</div> </div> </template> // 2. 注册组件 Vue.component("cpnc", { template: "#cpn" }) // 3.使用组件 var app = new Vue({ el: "#app", data:{ msg: "你好啊我的朋友", }, });
