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中使用,不能在根组件中使用
示例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
示例: // 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. 使用组件的常规写法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 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. 使用组件的语法糖写法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
注册全局组件 // 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] 组件模板的抽离
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 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示例
示例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 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: "你好啊我的朋友", }, });