vue 自定义组件(三) .sync、插槽 、混入

自定义组件 v-model的深入使用

比如在普通的input 的标签中，我们可以用v-model来实现数据的双向绑定，在自定义组件中，我们也可以使用v-model的双向绑定。
首先我们把属性名改成value,自定义的方法名为input,这个时候我们的格式很像v-model的实现原理，这个时候我们就可以缩写成v-model来实现数据的双向绑定
在多个数据需要传回页面的时候，这个方法不能够使用。

Vue.component("z-counter", {
            template:
                `
                

                    
{{label}}
                    

                        -
                        
                        +
                    
                
                `,
            // props 是只读的不能修改
            //prop 也可以是数组[属性名]
            props: {
                label: {
                    type: String,
                    //允许为空
                    required: false,
                },
                value: {
                    type: Number,
                    //不可为空
                    required: true
                },
                maxcount: {
                    type: Number,
                    default: 999
                },
                mincount: {
                    type: Number,
                    default: 1
                }
            },
            data() {
                return {
                    mydata: this.value
                }
            },
            watch: {
                mydata(val) {
                    this.$emit('input', val)
                }
            },
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    yf:{
                        label:'衣服',
                        count:3
                    },
                    kz:{
                        label:'裤子',
                        count:3
                    }
                }
            },
            methods: {
            }
        })

.sync修饰符

这三种方法都可以实现

        
{{yf}}
        
{{kz}}
        
{{xz}}
    
    

    
    

    

如果在组件中有多个数据需要回传，这个时候我们可以使用.sync修饰符 ，可以简化我们的调用过程。
我们的自定义回传方法yfcount(val){ this.$emit('update:yf', val) }, 加上update：的时候，我们可以在属性的后面加上.sync修饰符，这个时候，我们的回传方法可以省略

---

this.$emit('update:yf', val) update: 后面连接的是父类传过来的值的名称 ，需要保持一致

Vue.component("z-counter", {
            //模板
            template:`
                

                    

                        
衣服：
                        

                            -
                            
                            +
                        
                    
                    

                        
裤子：
                        

                            -
                            
                            +
                        
                    
                    

                        
鞋子：
                        

                            -
                            
                            +
                        
                    
                
 `,
              //自定义属性
            props: ['yf','kz','xz'],
            data() {
                return {
              //将自定义属性值进行重新赋值给新的变量，  因为自定义属性不能够改变默认值
                    yfcount:this.yf,
                    kzcount:this.kz,
                    xzcount:this.xz,
                }
            },
            watch: {
                 //监听事件，将新值传回给页面
                yfcount(val){
                    this.$emit('update:yf', val)
                },
                kzcount(val){
                    this.$emit('update:kz', val)
                },
                xzcount(val){
                    this.$emit('update:xz', val)
                }
            },
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    yf:3,
                    kz:3,
                    xz:2
                    }
                },
            methods: {

            }
        })

如果触发的事件名称是update:属性名，那么就可以使用..sync修饰符简化调用的过程。
总结：如果组件只回传一份数据，用v-model。如果组件回传多份数据，用.sync修饰符。

具名插槽

当我们的自定义组件中有多个插槽，这个时候我们需要把信息插入到对应的插槽，这个时候我们需要使用到具名插槽。
我们给插槽添加添加一个name属性，这个就是插槽的名称。
使用方法：
我们在自定义组件中用把插入的标签放入到里面 用v-slot:插槽名来插入固定插槽中
v-slot可以用#来代替 v-slot必须是在