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/n/132621.html