直面$parent/$children：剖析Vue组件的交际礼仪

2023-10-03 22:36:58

在Vue组件的互动中，parent/children扮演着至关重要的角色，它们为组件间的交流提供了桥梁。parent/children的使用场景主要涉及以下两个方面：

1. 直接调用父组件/子组件的方法

在Vue组件中，可以通过parent或children来直接调用父组件或子组件的方法，就像一家人互相拜访一样。这种方式的好处在于简洁高效，但同时也有可能带来副作用。例如，如果父组件和子组件同时使用相同的data，那么对数据进行修改可能会产生难以预料的后果。

2. 利用broadcast/dispatch进行数据传递

broadcast/dispatch就像是组件间传递信息时使用的“广播”和“派发”，可以方便地实现跨组件的数据传递。当组件需要向父组件或子组件发送消息时，可以调用broadcast()方法，这样消息就可以被所有后代组件接收。当需要将消息发送给特定组件时，可以使用dispatch()方法，消息将被发送给特定组件及其所有父组件。

parent/children与broadcast/dispatch的关系可以比作家庭成员间的交流，parent/children相当于家人间的直接对话，而broadcast/dispatch相当于通过信件或电话进行交流。在使用parent/children时，要注意尽量避免直接修改父组件或子组件的数据，而应通过传递消息的方式来进行数据交换。

除了上述两种场景，parent/children还有一些其他的使用场景，例如：

访问父组件的data ：子组件可以通过$parent来访问父组件的data，就像孩子可以从父母那里获得信息一样。
访问父组件的方法 ：子组件可以通过$parent来调用父组件的方法，就像孩子可以寻求父母的帮助一样。
向父组件发送事件 ：子组件可以通过$emit()方法向父组件发送事件，就像孩子可以向父母汇报情况一样。

为了帮助您更好地理解parent/children的用法，我将提供一个简单的示例：

// Parent.vue
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  }
}

// Child.vue
export default {
  data() {
    return {
      msg: ''
    }
  },
  mounted() {
    // 访问父组件的data
    this.msg = this.$parent.message

    // 调用父组件的方法
    this.$parent.sayHello()

    // 向父组件发送事件
    this.$emit('child-event', 'Hello from child!')
  }
}