快捷導航

Vue自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的方法

更新時間：2024年11月03日 11:48:14 作者：小李大魔王

這篇文章主要介紹了Vue自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的方法,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

一、Vue2 實現(xiàn)自定義組件雙向數(shù)據(jù)綁定

① v-model 實現(xiàn)雙向數(shù)據(jù)綁定

在vue2中，子組件上使用v-model的值默認綁定到子組件的props.value屬性上，由于子組件不能改變父組件傳來的屬性，所以需要通過$emit觸發(fā)事件使得父組件中數(shù)據(jù)的變化，然后再同步到子組件。vue2默認觸發(fā)v-model數(shù)據(jù)變化的事件為input。

使用如下：

子組件MySon

<template>
  <div>
    <div>雙向數(shù)據(jù)綁定：{{$props.value}}</div>
    <div><button @click="addValue">點擊++</button></div>
  </div>
</template>
?
<script>
export default {
  name: "MySon",
  props: ['value'],
  methods: {
    addValue() {
      //  觸發(fā)父組件中v-model綁定數(shù)據(jù)的變化，由于不能改變props數(shù)據(jù)中的值，所以不要寫this.$props.value++這樣的操作
      this.$emit('input', this.$props.value + 1)
    }
  }
}
</script>

如果希望改變接收v-model的屬性或改變觸發(fā)v-model數(shù)據(jù)變化的事件，可通過model:{}配置實現(xiàn)，如：

<template>
  <div>
    <div>雙向數(shù)據(jù)綁定：{{$props.value666}}</div>
    <div><button @click="addValue666">點擊++</button></div>
  </div>
</template>
?
<script>
export default {
  name: "MySon",
  props: ['value666'],
  // --> 配置接收v-model數(shù)據(jù)的屬性以及改變數(shù)據(jù)的事件 <--
  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: {
    //  監(jiān)視num數(shù)據(jù)的變化  
    num(newValue, oldValue) {
      console.log('num: ' + oldValue + ' -> ' + newValue)
    },
  },
  data() {
    return {
      num: 10,
    }
  },
}
</script>

② .sync 實現(xiàn)子組件多個數(shù)據(jù)雙向綁定

在Vue2中使用v-model只能使用一次，如果要實現(xiàn)多個雙向數(shù)據(jù)綁定，可以借助.sync修飾，使用語法為 :屬性.sync="數(shù)據(jù)" ，用這種綁定代替v-model，觸發(fā)數(shù)據(jù)改變的事件為update:屬性名

使用如下：

子組件

<template>
  <div>
    <div>sync雙向數(shù)據(jù)綁定：{{$props.data}}</div>
    <div><button @click="addData">點擊++</button></div>
  </div>
</template>
?
<script>
export default {
  name: "MySon",
  //    用props.data屬性接收雙向綁定的數(shù)據(jù)  
  props: ['data'],
  methods: {
    addData() {
      //    觸發(fā) update:data 事件改變父組件中綁定的值   
      this.$emit('update:data', this.$props.data + 1)
    }
  }
}
</script>

父組件

<template>
  <div id="app">
    <!-- 用 :data.sync 將數(shù)據(jù)雙向綁定到子組件的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:屬性名', 數(shù)據(jù))；來觸發(fā)父組件數(shù)據(jù)變化，原因如下：

<MySon :data.sync="num"></MySon>
          ||
          \/
        等價于
<MySon :data="num" @update:data="(newData) => {num = newData}"></MySon>

二、Vue3 實現(xiàn)雙向數(shù)據(jù)綁定

在Vue3中，v-model可以實現(xiàn)多個數(shù)據(jù)雙向數(shù)據(jù)綁定，同時.sync修飾符已經(jīng)不再生效。

① v-model 實現(xiàn)雙向數(shù)據(jù)綁定

vue3中子組件上使用v-model綁定的數(shù)據(jù)默認傳到子組件的props.modelValue屬性上（vue2是props.value屬性），并且默認觸發(fā)數(shù)據(jù)變化的事件為update:modelValue （vue2為input）

使用如下：

子組件

<template>
  <div>
    <div>雙向數(shù)據(jù)綁定modelValue：{{props.modelValue}}</div>
    <div><button @click="addModelValue">點擊++</button></div>
  </div>
</template>
<script setup>
  //    props.modelValue接收v-model綁定的數(shù)據(jù)
  const props = defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue'])
  function addModelValue(){
    //  觸發(fā)父組件中雙向綁定數(shù)據(jù)的變化
    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)
  //    監(jiān)視num數(shù)據(jù)變化
  watch(num, (newValue, oldValue) => {
    console.log('num: ' + oldValue + '->' + newValue)
  })
</script>

② v-model: 屬性實現(xiàn)多個數(shù)據(jù)雙向綁定

數(shù)據(jù)綁定語法：v-model:屬性="數(shù)據(jù)"

觸發(fā)數(shù)據(jù)變化的事件：update:屬性

使用如下：

子組件

<template>
  <div>
    <div>雙向數(shù)據(jù)綁定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數(shù)據(jù)綁定到子組件的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自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的方法的詳細內(nèi)容，更多關(guān)于Vue v-model雙向數(shù)據(jù)綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: