Vue组件化开发

一:组件注册
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
详细的代码实例:
插槽使用的具体示例
作用域插槽示例