自定义子组件的v-model

一、传统的父子传参

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

1.父传子

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

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

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

<template><div><Son type="666" /></div>
</template>

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

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

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

<template><div>来自父组件的 {{ type }}</div>
</template>

2.子传父

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

<template><div><Son @toFather="fromSon" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},methods: {fromSon(data) {console.log('子组件传递的参数'，data )}}
}
</script>

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

<template><div><button @click="dataToFather" /></div>
</template><script>
export default {name: 'Son',data() {return {sonData: '子组件的数据'}},methods: {dataToFather() {this.$emit('toFather', this.sonData)}}
}
</script>

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

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

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

<template><div><Son  /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son}
}
</script>

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

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

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

<script>
export default {name: 'Son',model: {prop: 'value', // 父组件的v-model所绑定的值是这里的prop的属性值对应的props中的值event: 'change' // 定义通过$emit去调用的父组件的事件，在父组件的v-model改变时则会按照这个方法去处理},props: {value: String, // 接受父组件传递的v-model后面值的类型,必须在此注册不然没法使用},
}
</script>

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

<template><div>父组件{{ sonData }}<Son v-model="sonData" type="66" /><el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>

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

<template><div><el-input v-model="toFather" clearable maxlength="200" @change="change" /></div>
</template><script>
export default {name: 'Son',model: {prop: 'val1ue', // 父组件的v-model所绑定的值是这里的prop的属性值对应的props中的值event: 'change' // 定义通过$emit去调用的父组件的事件，在父组件的v-model改变时则会安装这个方法去处理},props: {value: String, // 接受父组件传递的v-model后面值的类型,必须在此注册不然没法使用},data() {return {toFather: '子组件的数据'}},methods: {change() {this.$emit('change', this.toFather)}}
}
</script>

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

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