简述 Vue父子組件和非父子組件的通信

Vue组件之间的通信可以分为父子组件通信和非父子组件通信两大类。下面将分别进行详细的解释：

父子组件通信

1. 父传子

• 方式：通过props属性进行传递。
• 步骤：
  1. 在父组件中定义要传递的数据。
  2. 在父组件的模板中，使用子组件标签并动态绑定父组件的数据到子组件的props上。
  3. 在子组件中，通过props选项声明要接收的数据，并在模板中使用这些数据。

示例代码：

父组件：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

export default {
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

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

2. 子传父

• 方式：通过自定义事件进行传递。
• 步骤：
  1. 在子组件中，当需要向父组件传递数据时，使用this.$emit('eventName', payload)触发一个自定义事件。
  2. 在父组件中，使用@eventName或v-on:eventName监听子组件的自定义事件，并在事件处理函数中接收数据。

示例代码：

子组件：

<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
}
</script>

父组件：

<template>
  <child-component @childEvent="handleChildEvent"></child-component>
</template>

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

export default {
  methods: {
    handleChildEvent(message) {
      console.log(message); // 输出：'Hello from Child'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

非父子组件通信

1. 事件总线（Event Bus）

• 方式：创建一个新的Vue实例作为事件中心，用于在任意组件之间传递事件和消息。
• 步骤：
  1. 创建一个新的Vue实例作为事件总线。
  2. 在需要发送消息的组件中，使用EventBus.$emit('eventName', payload)发送消息。
  3. 在需要接收消息的组件中，使用EventBus.$on('eventName', callback)监听消息。

2. Vuex

• 方式：Vuex是Vue.js的状态管理模式和库，用于集中存储和管理组件的状态。
• 步骤：
  1. 安装和配置Vuex。
  2. 在Vuex的store中定义state、mutations、actions等。
  3. 在组件中，通过this.$store.state访问状态，通过this.$store.commit提交mutation，或者通过this.$store.dispatch分发action。

3. provide/inject

• 方式：允许祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，该依赖都可以作为属性供后代组件使用。
• 步骤：
  1. 在祖先组件中，使用provide选项提供数据或方法。
  2. 在后代组件中，使用inject选项来接收这些数据或方法。

以上方式可以根据具体项目需求和场景来选择使用。在大型项目中，Vuex通常是一个很好的选择，因为它提供了清晰的状态管理和数据流。而在小型项目中，父子组件通信和事件总线可能更加轻量级和易于实现。