Vue父子組件雙向綁定詳解

一、父子組件雙向綁定

Vue的父子組件雙向綁定是Vue中的一個非常核心的特性，它允許子組件可以通過prop接收父組件的數據並且能夠在父組件中實現對子組件的響應數據更新。可以理解為：父組件向子組件傳遞props數據時，子組件能夠實時知曉數據的變化。

//父組件代碼
<template>
  <div>
    <child-component :message="parentMessage" @update-message="updateParentMessage"/>
  </div>
</template>

<script>
  import childComponent from './childComponent.vue';
  export default {
    components: {
      'child-component': childComponent 
    },
    data() {
      return {
        parentMessage: 'Hello, Vue!'
      }
    },
    methods: {
      updateParentMessage(msg) {
        this.parentMessage = msg 
      }
    }
  }
</script>

//子組件代碼
<template>
  <div>
    <input v-model="childMessage"/>
    <button @click="updateParent">Update Parent</button>
  </div>
</template>

<script>
  export default {
    props: ['message'],
    data() {
      return {
        childMessage: ''
      }
    },
    methods: {
      updateParent() {
        //用於傳遞更新數據到父組件
        this.$emit('update-message', this.childMessage)
      }
    }
  }
</script>

上述代碼中展示了一個比較基礎的父子組件雙向綁定的例子。父組件<div>中使用了<child-component>標籤，通過:綁定的方式將父組件的parentMessage數據傳遞到子組件中，並且調用了updateParentMessage方法更新了父組件的數據。在子組件中使用v-model綁定message數據，配合updateParent方法通過$emit方法將子組件中的childMessage數據更新到父組件中。

二、Vue實現父子組件雙向數據綁定

在Vue中實現父子組件雙向數據綁定需要依靠在子組件中使用v-model並且父組件保持sync修飾符同步更新子組件數據的方式，同時也需要保證在更新父組件數據後，子組件能夠及時響應並更新。

//父組件代碼
<template>
  <div>
    <child-component :message.sync="parentMessage"/>
  </div>
</template>

<script>
  import childComponent from './childComponent.vue';
  export default {
    components: {
      'child-component': childComponent 
    },
    data() {
      return {
        parentMessage: 'Hello, Vue!'
      }
    }
  }
</script>

//子組件代碼
<template>
  <div>
    <input v-model="message"/>
  </div>
</template>

<script>
  export default {
    props: ['message'],
    watch: {
      message(newVal) {
        this.$emit('update:message', newVal)
      }
    }
  }
</script>

上述代碼實現了父子組件雙向數據綁定。在父組件中通過:綁定的方式將parentMessage的值傳遞給子組件中的message，子組件使用v-model綁定message並且保證在數據變化後及時響應。在子組件的watch中監聽message數據變化，並且通過$emit方法將更新後的數據通知給父組件。

三、Vue3父子組件雙向綁定

在Vue3中實現父子組件雙向數據綁定，需要使用v-model增強組件props，在父組件中使用v-model進行雙向數據綁定。

//父組件代碼
<template>
  <div>
    <child-component v-model:message="parentMessage"/>
  </div>
</template>

<script>
  import childComponent from './childComponent.vue';
  export default {
    components: {
      'child-component': childComponent 
    },
    data() {
      return {
        parentMessage: 'Hello, Vue 3!'
      }
    }
  }
</script>

//子組件代碼
<template>
  <div>
    <input :value="message" @input="$emit('update:message', $event.target.value)"/>
  </div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

在Vue3中，使用v-model增強組件props，需要在子組件中增加value以及$emit方法。

四、Vue父子組件非同步傳值

父組件傳遞給子組件的數據，在某些場景下可能需要非同步獲取，這時候就可能出現一個問題：在子組件中接收到父組件的數據時，此時它的數據還不存在，需要在後面的某個時間點才會有。如果按照父子組件傳值的常規方式，子組件獲取不到父組件的數據，就會出現問題。

針對這個問題，Vue提供了一個雙向數據綁定的修飾符.sync，也可以在Vue2中使用以及通過Vue3中的v-model實現。這個修飾符可以幫助我們在父子組件中實現非同步的數據傳遞。

//父組件代碼
<template>
  <div>
    <child-component :message.sync="data"/>
  </div>
</template>

<script>
  import childComponent from './childComponent.vue';
  export default {
    components: {
      'child-component': childComponent 
    },
    data() {
      return {
        data: null
      }
    },
    created() {
      this.getData().then(res => {
        this.data = res 
      })
    },
    methods: {
      getData() {
        return Promise.resolve('Hello, Vue!')
      }
    }
  }
</script>

//子組件代碼
<template>
  <div>
    <input :value="message" @input="updateMessage"/>
  </div>
</template>

<script>
  export default {
    props: ['message'],
    methods: {
      updateMessage(event) {
        this.$emit('update:message', event.target.value)
      }
    }
  }
</script>

上述代碼中展示了如何在父子組件中實現非同步的數據傳遞。父組件在created中通過getData非同步獲取數據，並且在獲取到數據後將數據更新到data中。在父組件中將message綁定到data上，子組件通過props接收message，並且使用v-model綁定message。在子組件中通過$emit方法，將輸入框的值更新到message中，並通知父組件更新。

五、Vue父子組件銷毀順序

在Vue中，使用組件是非常頻繁的，對於開發者而言，知道什麼時候組件被銷毀是很重要的。Vue中一般的組件銷毀順序是：子組件 -> 父組件 -> 父組件頁面的其他部分。

在Vue的官方文檔中，給出了一份更詳細的組件銷毀順序：

調用beforeDestroy()
銷毀子組件和它們對應的監聽器和DOM元素
調用destroyed()
從父組件中刪除佔位符節點
調用beforeDestroy()
調用destroyed()

這裡需要注意的是：在銷毀子組件之前，會調用beforeDestroy()方法，子組件被銷毀之後，又會調用一次beforeDestroy()和destroyed()，然後再銷毀父組件。

六、Vue父子組件數據雙向綁定

在Vue中，父子組件的雙向數據綁定是非常方便的，可以通過prop和$emit方法實現。但是，在一些特殊場景下，雙向數據綁定會帶來一些問題，這時候可以使用計算屬性實現父子組件數據雙向綁定。

//父組件代碼
<template>
  <div>
    <child-component :value="computedValue" @input="updateValue"/>
  </div>
</template>

<script>
  import childComponent from './childComponent.vue';
  export default {
    components: {
      'child-component': childComponent 
    },
    data() {
      return {
        parentValue: 'Hello, Vue!'
      }
    },
    computed: {
      computedValue: {
        get() {
          return this.parentValue
        },
        set(val) {
          this.parentValue = val
        }
      }
    },
    methods: {
      updateValue(val) {
        this.parentValue = val
      }
    }
  }
</script>

//子組件代碼
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)"/>
  </div>
</template>

<script>
  export default {
    props: ['value']
  }
</script>

上述代碼中展示了如何通過計算屬性實現父子組件雙向數據綁定。在父組件中定義computedValue計算屬性，並且在computedValue的get和set方法中分別將其關聯到parentValue上。在父組件的<child-component>標籤中綁定value（即父組件中的computedValue），並且通過@input事件將子組件中的值更新到父組件中。

七、Vue自定義組件實現雙向綁定

在Vue中，自定義組件是非常重要、常用的組件類型。要實現自定義組件實現雙向綁定，需要在組件內部使用v-model並且使用$emit方法將更新的數據從組件傳遞到父組件中。

//父組件代碼
<template>
  <div>
    <custom-input v-model="parentValue"/>
  </div>
</template>

<script>
  import customInput from './customInput.vue';
  export default {
    components: {
      'custom-input': customInput 
    },
    data() {
      return {
        parentValue: 'Hello, Vue!'
      }
    }
  }
</script>

//子組件代碼
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)"/>
  </div>
</template>

<script>
  export default {
    props: ['value']
  }
</script>

上述代碼中展示了如何通過自定義組件實現雙向綁定。在父組件中使用<custom-input>標籤，並且將v-model綁定到parentValue。在子組件中使用v-model綁定到value，並且通過$emit方法將input事件的值更新到父組件中。

八、Vue組件內部雙向綁定

在Vue的組件中可以通過v-model實現組件內部雙向數據綁定。

//組件

原創文章，作者：ZVAI，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/132621.html