Vue自定义组件实现v-model双向数据绑定的方法_Vue.js

一、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双向数据绑定的资料请关注代码网其它相关文章！