组件化开发:
组件化开发,就是将大的网页划分为若干组件区域,每个组件区域都有专门的HTML,CSS和数据。
自定义组件,分为3种:
- 根组件:
1
2
3
4new Vue({
el:"父元素选择器",
data:{ 模型变量 }
}) - 全局组件:可用在页面任何位置的组件
1
2
3
4
5
6Vue.component("组件名", {
template:"template元素的选择器",
data:function(){
return { 模型变量 }
}
}) - 子组件: 只能用于特定的父组件内
何时: 只要规定一个组件只能出现在指定的父组件内
如何:
- 将全局组件降级:
1
2
3
4
5
6var 子组件对象={
template:"template元素的选择器",
data:function(){
return { 模型变量 }
}
} - 在父组件中,添加components属性,包含子组件对象,并为子组件起名!
1
2
3
4
5var 父组件={
components:{
"子组件名":子组件对象
}
}
组件间通信:
父->子: 属性下行:
子组件: 定义props属性,其中包含接收父组件数据的模型变量
props属性:可被外部访问,并赋值的特殊模型数据
- 在组件内的用法和data中的模型变量完全一样!
- 可被其他组件发现并赋值。
父组件的template中: <子组件 :子组件props属性变量="父组件模型变量">
- 结果: 父组件将自己的模型变量赋值给子组件内的props属性变量。
子->父: 事件上行
- 父组件中:
<子组件 @自定义事件名="处理函数" >
强调: @自定义事件名=”处理函数”,在定义处理函数时不要加(参数)。因为参数会被认为是绑定模型变量,会报错。
2. 子组件任意位置,都可触发父组件中绑定的自定义事件
this.$emit(“自定义事件名”,参数值)
会触发父组件template中,提前绑定的@自定义事件,并将参数传递给父组件中的处理函数
兄弟间: 采用先给父,再由父绑定到另一个子
强烈建议,今后,只要多个子组件共用一个数据时,都应将数据定义在父组件上。
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!