vue2 自定义组件—v-model—.sync修饰符—具名插槽—作用域插槽—混入

1st.深入理解v-model

   我们都知道 v-model指令是vue用来双向绑定数据的，但其实v-mode也是vue封装起来的指令。v-model指令其实就是对v-bind:value 和 v-on:input的简写，所以在自定义组件中，只要有v-bind:value绑定value属性和v-on:input绑定input事件，就可以使用v-model指令来双向绑定：

   上面两行代码的效果是一样的，都可以双向绑定自定义组件的数据，使得在自定义组件内部修改的值能在页面中更新。可以看到，第一行代码使用的变量名是value，自定义事件名是input，此时，可以使用v-model来绑定value的数据，这样就达到双向绑定的目的了。

2nd.  .sync修饰符

    大多数情况下，自定义组件都会有多个自定义属性，因为自定义属性不能重名，value只能有一个，所以v-model在这里就不适用了。转而用.sync修饰符。

  使用.sync修饰符可以简化调用的过程， 它需要触发的事件名称是 update:属性名 格式才可以使用：

//自定义组件中定义自定义事件

watch: {

                        yfCount(nval) {

                            this.$emit("update:yf", nval)

                        },

                        kzCount(nval) {

                            this.$emit("update:kz", nval)

                        },

                        xzCount(nval) {

                            this.$emit("update:xz", nval)

                        },

                    }

定义好 update:属性名 格式的自定义属性后，在使用这个属性时只需要在后面.sync便可以实现双向绑定

3rd. 具名插槽

    前几节说过，slot就是插槽，它可以把自定义组件的两个标签中间的内容在自定义组件中的slot标签中显示。但是这种方法只能把内容一股脑的全部塞入slot，不能灵活的控制需要显示的位置。为了解决这个问题，就需要使用具名插槽。

    具名插槽需要给slot一个name属性，把这个slot放在需要的地方，想要控制模块往这个具名插槽添加时，需要给模块一个template容器，并且给属性v-slot（v-slot: 缩写是 # ），属性值就是需要放入的插槽的name属性值。设置好了之后，被template容器包裹的模块就会在对应name值的slot标签中渲染：

//自定义组件插槽

name="header">

//使用自定义组件时使用template容器包裹

    

    

        

好好学习

    

4rd. 作用域插槽

    作用域插槽就是在slot标签上绑定属性，这样外面在使用该插槽时，就可以获取并且操作上面绑定的数据。

//作用域插槽

//使用绑定属性的方法给页面传值

//自定义组件内部数据

 list:[

                        {

                            id:1001,

                            name:"苹果",

                            price:5999

                        },

                        {

                            id:1004,

                            name:"三星",

                            price:4999

                        }

                    ]

注意，使用作用域插槽需要在具名插槽的基础上，给slot一个name属性

然后，在使用作用域插槽时使用 v-slot:del="接受参数" (v-slot: 缩写是 # )来接收作用域插槽传过来的值，一般 scope 接收，然后就可以在这个template 中使用这个数据了。

   

        

                删除

        

    

5rd. 混入

   混入是为了解决vue中代码复用的问题，在混入中写的代码将在之后的所有的vue实例中执行。

    使用mixin()方法，该方法的参数是配置对象，Vue实例可以配置的东西，它都可以配置。 比如：数据，方法，生命周期钩子函数，计算属性，侦听器，过滤器，等等

    在全局混入的内容，之后创建的所有Vue实例包括组件实例都将拥有。在创建Vue实例时，会将mixin里面的成员跟Vue实例自身的成员进行合并，如果冲突了，最终采用Vue实例身上的成员。

     特别注意：生命周期钩子不是合并，是叠加执行，是先执行mixin里面的生命周期钩子，再执行Vue实例里面的生命周期钩子。

//配置混入对象

Vue.mixin({

            data() {

                return {

                    name:"张三",

                    age:18

                }

            },

            mounted() {

                console.log("mixin 挂载完成");

            },

            methods: {

                log(){

                    console.log("mixin打印");

                }

            },

        })

//之后创建的vue实例都会包含混入的内容

new Vue({

            el:'#app',

            data:{

            },

            methods: {

                log(){

                    console.log("app 打印");

                }

            },

            mounted() {

                console.log("app 挂载完成");

            },

        })

效果展示