Vue自定义组件实现v-model双向数据绑定的方法
作者:小李大魔王
这篇文章主要介绍了Vue自定义组件实现v-model双向数据绑定的方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
一、Vue2 实现自定义组件双向数据绑定
① v-model 实现双向数据绑定
在vue2中,子组件上使用v-model的值默认绑定到子组件的props.value属性上,由于子组件不能改变父组件传来的属性,所以需要通过$emit触发事件使得父组件中数据的变化,然后再同步到子组件。vue2默认触发v-model数据变化的事件为input。
使用如下:
子组件MySon
<template> <div> <div>双向数据绑定:{{$props.value}}</div> <div><button @click="addValue">点击++</button></div> </div> </template> <script> export default { name: "MySon", props: ['value'], methods: { addValue() { // 触发父组件中v-model绑定数据的变化,由于不能改变props数据中的值,所以不要写this.$props.value++这样的操作 this.$emit('input', this.$props.value + 1) } } } </script>
如果希望改变接收v-model的属性或改变触发v-model数据变化的事件,可通过model:{}配置实现,如:
<template> <div> <div>双向数据绑定:{{$props.value666}}</div> <div><button @click="addValue666">点击++</button></div> </div> </template> <script> export default { name: "MySon", props: ['value666'], // --> 配置接收v-model数据的属性以及改变数据的事件 <-- model: { prop: 'value666', event: 'updateValue666' }, methods: { addValue666() { this.$emit('updateValue666', this.$props.value666 + 1) } } } </script>
父组件
<template> <div id="app"> <MySon v-model="num"></MySon> </div> </template> <script> import MySon from "@/components/MySon.vue"; export default { name: 'App', components: { //注册子组件 MySon }, watch: { // 监视num数据的变化 num(newValue, oldValue) { console.log('num: ' + oldValue + ' -> ' + newValue) }, }, data() { return { num: 10, } }, } </script>
② .sync 实现子组件多个数据双向绑定
在Vue2中使用v-model只能使用一次,如果要实现多个双向数据绑定,可以借助.sync修饰,使用语法为 :属性.sync="数据"
,用这种绑定代替v-model,触发数据改变的事件为update:属性名
使用如下:
子组件
<template> <div> <div>sync双向数据绑定:{{$props.data}}</div> <div><button @click="addData">点击++</button></div> </div> </template> <script> export default { name: "MySon", // 用props.data属性接收双向绑定的数据 props: ['data'], methods: { addData() { // 触发 update:data 事件改变父组件中绑定的值 this.$emit('update:data', this.$props.data + 1) } } } </script>
父组件
<template> <div id="app"> <!-- 用 :data.sync 将数据双向绑定到子组件的data属性上 --> <MySon :data.sync="num"></MySon> </div> </template> <script> import MySon from "@/components/MySon.vue"; export default { name: 'App', components: { MySon }, watch: { num(newValue, oldValue) { console.log('num: ' + oldValue + ' -> ' + newValue) } }, data() { return { num: 10 } }, } </script>
至于为什么子组件要通过$emit('update:属性名', 数据);来触发父组件数据变化,原因如下:
<MySon :data.sync="num"></MySon> || \/ 等价于 <MySon :data="num" @update:data="(newData) => {num = newData}"></MySon>
二、Vue3 实现双向数据绑定
在Vue3中,v-model可以实现多个数据双向数据绑定,同时.sync修饰符已经不再生效。
① v-model 实现双向数据绑定
vue3中子组件上使用v-model绑定的数据默认传到子组件的props.modelValue属性上(vue2是props.value属性),并且默认触发数据变化的事件为update:modelValue (vue2为input)
使用如下:
子组件
<template> <div> <div>双向数据绑定modelValue:{{props.modelValue}}</div> <div><button @click="addModelValue">点击++</button></div> </div> </template> <script setup> // props.modelValue接收v-model绑定的数据 const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) function addModelValue(){ // 触发父组件中双向绑定数据的变化 emit('update:modelValue', props.modelValue + 1) } </script>
父组件
<template> <Son v-model="num"></Son> </template> <script setup> import {ref, watch} from "vue"; import Son from "@/components/Son.vue"; const num = ref(0) // 监视num数据变化 watch(num, (newValue, oldValue) => { console.log('num: ' + oldValue + '->' + newValue) }) </script>
② v-model: 属性 实现多个数据双向绑定
数据绑定语法:v-model:属性="数据"
触发数据变化的事件:update:属性
使用如下:
子组件
<template> <div> <div>双向数据绑定data:{{props.data}}</div> <div><button @click="addData">点击++</button></div> </div> </template> <script setup> const props = defineProps(['data']) const emit = defineEmits(['update:data']) const addData = () => { emit('update:data', props.data + 1) } </script>
父组件
<template> <!-- 将num数据绑定到子组件的data属性上 --> <Son v-model:data="num"></Son> </template> <script setup> import {ref, watch} from "vue"; import Son from "@/components/Son.vue"; const num = ref(0) watch(num, (newValue, oldValue) => { console.log('num: ' + oldValue + '->' + newValue) }) </script>
以上就是Vue自定义组件实现v-model双向数据绑定的方法的详细内容,更多关于Vue v-model双向数据绑定的资料请关注脚本之家其它相关文章!