解锁Vue魔法门：父子组件双向绑定的神秘密码！

引言

在前端开发中，组件通信是不可避免的一部分。Vue中的数据流是单向的，这有助于使应用更容易维护和调试，但也带来了一些挑战。在讨论数据双向绑定之前，让我们先了解一下Vue中的单向数据流。

单向数据流

在Vue中，数据的流动被设计成单向的，所有父子组件之间形成了一种自上而下的单向绑定。即父级组件的prop更新会向下传递到子组件中，但反过来却不成立。这种设计有助于提高应用的可维护性和调试性，避免了子组件意外修改父级组件状态的风险。每次父级组件发生变更时，子组件中所有的prop都会刷新为最新的值。然而，在子组件内部直接修改prop将触发Vue在浏览器控制台中发出警告。

示例警告代码可能类似于：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

由于Vue是单向数据流，为了解决从子组件向父组件传递变更的需求，我们需要实现父子组件中的数据双向绑定。

.sync修饰符

.sync修饰符是Vue提供的一种方式，通过在父组件中使用:visible.sync="showDialog"，在子组件中使用computed计算visible的值，并在变化时通过this.$emit('update:visible', false)广播给父组件，实现双向绑定。

使用 .sync 修饰符，是双向绑定的一种语法糖

<ChildComponent :visible.sync="show" />

等价于

<ChildComponent :visible="showDialog" @update:visible="val => showDialog = val" />

实际场景 – 模态框： 以一个模态框为例，展示如何使用.sync修饰符实现模态框的显示和隐藏，以及在子组件内部如何通过按钮切换模态框的状态。

父组件代码示例：

<!-- 在父组件中 -->
<template>
  <ChildComponent :visible.sync="showDialog" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      showDialog: false
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件代码示例：

<!-- 在子组件中 -->
<template>
  <div>
    <!-- 使用计算属性 -->
    <div v-if="visibleComputed">Dialog is visible!</div>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  computed: {
    visibleComputed: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    }
  },
  methods: {
    toggleVisibility() {
      this.visibleComputed = !this.visibleComputed;
    }
  }
};
</script>

v-model关键字

v-model关键字是Vue提供的另一种语法糖，通过在父组件中使用v-model="msg"向子组件传递值，子组件内部通过props接受value，并使用watch观察者模式监听value的变化，使用this.$emit('input', this.message)广播子组件的值到父组件，实现双向数据绑定。

使用 v-model 关键字，也是一种语法糖

<ChildComponent v-model="msg" />

等价于

<ChildComponent :value="msg" @input="val => msg = val" />

实际场景 – 实时搜索： 展示一个实时搜索的例子，父组件传递搜索关键字，子组件实时更新搜索结果。

父组件代码示例：

<!-- 在父组件中 -->
<template>
  <ChildComponent v-model="msg" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      msg: 'Hello from parent!'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件代码示例：

<!-- 在子组件中 -->
<template>
  <div>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  data() {
    return {
      message: this.value
    };
  },
  watch: {
    value(newVal) {
      this.message = newVal;
    },
    message(newVal) {
      this.$emit('input', newVal);
    }
  }
};
</script>

普通数据双向绑定

在某些情况下，我们需要在父子组件之间进行更复杂的数据交互，不仅仅是简单的值传递。这时，我们可以使用事件的方式实现这种双向通信。父组件修改prop的数据状态，子组件 this.$emit发送事件广播，通知父组件修改父组件内的数据状态，同时父组件需要监听相关的event来修改同步修改prop的值。

父组件代码示例：

<!-- 在父组件中 -->
<template>
  <Child :message="message" @updateMessage="updateMessage" />
</template>

<script>
import Child from './Child.vue';

export default {
  data() {
    return {
      message: 'Hello from parent!'
    };
  },
  components: {
    Child
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

子组件代码示例：

<!-- 在子组件中 -->
<template>
  <div>
    <input v-model="localMessage" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      localMessage: this.message
    };
  },
  methods: {
    sendMessage() {
      this.$emit('updateMessage', this.localMessage);
    }
  }
};
</script>

骚操作：传入引用数据类型

在Vue中，通过传递引用数据类型，我们可以在子组件中修改属性时，父组件同时更新，实现双向绑定。

实际场景 – 购物车： 假设我们正在构建一个购物车组件。父组件传递购物车商品列表给子组件，而子组件可以通过事件向父组件发出添加或删除商品的请求，保持购物车数据的同步。

父组件代码示例：

<!-- 在父组件中 -->
<template>
  <Child :cart="cart" />
</template>

<script>
import Child from './Child.vue';

export default {
  data() {
    return {
      cart: {
        items: [],
        total: 0
      }
    };
  },
  components: {
    Child
  }
};
</script>

子组件代码示例：

<!-- 在子组件中 -->
<template>
  <div>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
export default {
  props: {
    cart: Object
  },
  methods: {
    addToCart() {
      // 在子组件中修改cart对象的属性
      this.cart.items.push({ name: 'Product', price: 20 });
      this.cart.total += 20;
    }
  }
};
</script>

结语

Vue提供了多种方式来实现父子组件之间的数据双向绑定，每种方式都有其适用的场景。通过灵活运用这些技巧，我们能够更高效地进行组件通信，提高代码的可维护性和可读性。希望本文能够帮助你更好地理解Vue中的数据双向绑定，并在实际开发中得心应手。

才疏学浅，如有讲述不清之处，还请指正，共同进步。

原文链接：https://juejin.cn/post/7327157426297864207 作者：南方code