vue父子組件之間雙向數(shù)據(jù)綁定的四種方法(vue2/vue3)

vue考慮到組件的可維護性，是不允許子組件改變父組件傳的props值的。父組件通過綁定屬性的方式向子組件傳值，而在子組件中可以通過$emit向父組件通信（第一種方式），通過這種間接的方式改變父組件的data，從而實現(xiàn)子組件改變props的值。

第一種（原始，比較麻煩）

//父組件
<template>
    <div>
        <child :value='value' @getChildData='getChildData'></child>
         來自子組件的數(shù)據(jù)：<span>{{value}}</span>
    <div/>
</template>
<script>
data() {
      return {
        value: '父組件的數(shù)據(jù)'
      }
    },
methods:{
    getChildData(v){
        this.value = v
    }
}
</script>


//子組件child
<template>
    <input v-model='value' @input='childInputChange'></input>
</template>
<script>
export default{
props:{
    value:{
        type:String,//在props接受父組件傳遞數(shù)據(jù)
        default:''
    }
},
watch:{
    value(){
        this.childValue = this.value //監(jiān)聽父組件的數(shù)據(jù)，同步更新子組件數(shù)據(jù)
    }
   },
methods:{
    childInputChange(){
        this.$emit('getChildData',this.childValue) // 通過emit觸發(fā)getChildData，將子組件數(shù)據(jù)傳遞給父組件
    }
}

</script>

第二種 （自定義組件的 v-model 2.2.0+ 新增）

<input v-model="searchText">
等價于：
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

當用在組件上時，v-model 則會這樣

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

//1、將其 value attribute 綁定到一個名叫 value 的 prop 上
//2、子組件通過自定義的 input 事件拋出
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

第三種（.sync 2.3.0+ 新增）

//父組件
<template>
    <TestCom :num.sync="data"></TestCom>
</template>
<script>
export default({
  components: {
    TestCom,
  },
  data() {
    return {
      data:2
    }  
  },
});
</script>


//子組件
<template>
  <div>
    <button @click="cahngeNum">按鈕</button>
    {{ num }}
  </div>
</template>

<script>
export default({
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  methods: {
    cahngeNum() {
      this.$emit("update:num", 999); // 觸發(fā)update:data將子組件值傳遞給父組件
    },
  },
});
</script>

第四種 （vue3）

• vue3取消了.sync這種語法，使用v-model 語法代替。
• 默認情況下，v-model 在組件上都是使用 modelValue 作為 prop，并以 update:modelValue 作為對應的事件。
• 我們可以通過給 v-model 指定一個參數(shù)來更改這些名字
• vue3允許寫多個v-model

// 父組件
<template>
    <div>
        // 父組件傳遞給子組件num屬性(默認使用modelValue)
        <child v-model:num = data></child>
    </div>
</template>
<script>
    data(){
      return {
        data:'我是來自父組件的數(shù)據(jù)'
      }
    }
</script>


//子組件
<template>
  <div>
    <button @click="cahngeNum">按鈕</button>
    {{ num }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  emits: ["update:num"],
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  setup(props, { emit }) {
    function cahngeNum() {
      emit("update:num", 999); 
    }
    return { cahngeNum };
  },
});
</script>

ve3多個 v-model 綁定文章來源地址http://www.zghlxwxcb.cn/news/detail-482717.html

//父組件
<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>


//子組件
<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

到了這里，關(guān)于vue父子組件之間雙向數(shù)據(jù)綁定的(vue2/vue3)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！