一:组件注册
1.1全局组件注册
全局组件注册.png
vue组件data必须是函数的原因
1.2组件的用法
组件的用法.png
1.3组件注册的注意事项
组件注册的注意事项.png
1.4组件的命名方式
组件的命名方式.png
2.局部组件
2.1局部组件的注册
局部组件的注册.png
局部注册的组件只能在引用他的父组件中使用
3.组件传值
3.1父组件向子组件传值[props]
组件内部通过props接收父组件的传值.png
注意:
props属性名规则.png
3.1.2 prop属性值类型:
prop属性值类型.png
props 传递数据,单向传递,只能父组件向子组件传递
3.2子组件向父组件传值
子组件向父组件传值 .png
①传递一个参数
//子组件传一个参数
this.$emit('large',"参数1");
//父组件中接收
<children :item="13" @large='large($event)'></children>
methods: {
large(val){
console.log("子组件传参",val);
}
},
单个参数.png
②多个参数传递
//子组件传一个参数
this.$emit('large',"参数1","参数2","参数3");
//父组件中接收
<children :item="13" @large='large(arguments)'></children>
methods: {
large(val){
console.log("子组件传参",val);
}
},
多个参数.png
拓展:父子组件通信的多种方式
4.非父子组件的通信
非父子组件间传值.png
5.插槽
子组件通过slot预留位置,父组件向子组件中填充自定义的内容,父组件决定插槽的显示内容,子组件决定插槽的显示位置
5.1匿名插槽(不具名插槽 | 单个插槽) :
插槽的简单实用.png
5.2具名插槽
具名插槽.png
5.3作用域插槽
作用域插槽.png
详细的代码实例:
插槽使用的具体示例
作用域插槽示例
网友评论