自定义子组件的v-model

一、传统的父子传参

        作为前端程序员，我们在开发时，用到最多的就是父子传参了吧，这一点相信大家都很熟悉了，在这里简单的说一下

        1.父传子

        （1）  在父组件中引入子组件，并在父组件的components中注册该组件

import Son from './son'
export default {
    name: 'Father',
    components: {
        Son
    }
}

          （2）在父组件中将该子组件当正常标签一样使用，将要传递的数据用子组件的属性去传递

        （3）在子组件的props里面去接收父组件传递的值，并说明类型

export default {
    name: 'Son',
    props: {
        type: String
    }
}

        （4）此时，父组件传递的值就可以在子组件中和子组件本身的data中的数据一样使用了

        2.子传父

        （1）在父组件中写该子组件的标签上去自定义一个事件类型，并绑定一个对应的事件处理函数，该函数的参数即是子组件传递过来的数据

        （2）在子组件中通过$emit去调用父组件中自定义的事件类型对应的事件，$emit的第一个参数为对应的父组件的事件类型，第二个参数为要传递的数据。

        那么有没有一种方法可用更简便的实现同一个值的父子互传呢？在我说出这个问题时候相信很多人都感觉哪里很熟悉吧！听起来是不是和v-model很像？事实上，自定义组件也可以自定义v-model！

 二、自定义子组件的v-model

         1.首先我们需要在父组件中正常的引入子组件，并将其当做标签使用

        2.我们要去子组件中去制定改子组件的v-model的使用规则：与data同级的地方写一个model，其对应的属性值为一个对象，包含两个属性：

• prop：此属性是用来绑定在使用v-model后子组件中要改变的值是哪个的
• event：此属性是用来代替原来在父组件中子组件标签上面的自定义事件类型的，后续使用$emit去调用的就是这个事件类型

        在这里还要注意，在props里面还是需要正常去接收该值并说明类型的，否组无法在子组件中拿到并使用

        3.到这里，我们就可以在父组件中子组件标签上面使用v-model了

        4.在子组件中通过$emit去向父组件传递由v-model绑定的数据

        走到这一步，我们的自定义v-model就算是完成了，我们会发现，在父组件中改变 中的sonData时，子组件中的value会跟着改变，同样，在子组件中通过改变去调用change方法时，该方法也会通过我们置顶好的规则去将参数传递给父组件中v-model所绑定的sonData！

---

大家也可以去参考官方文档：自定义事件 — Vue.js (vuejs.org)