【VUE 组件之间通信的几种方式】

Vue.js中的组件通信是指在Vue.js应用程序中，不同组件之间进行数据传递、事件触发等操作的过程。Vue.js提供了多种方式来实现组件之间的通信，包括Props、Custom Events、
emit、parent和$children、Vuex等。

1. Props（属性）

Props 是一种从父组件向子组件传递数据的方式。父组件可以通过Props向子组件传递数据，子组件通过props属性接收数据。

父组件：

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

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

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

子组件（ChildComponent.vue）：

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

<script>
export default {
  props: {
    message: String
  }
};
</script>

2.任意组件之间的通讯（eventBus）

Vue的eventBus是用来在组件之间传递消息的工具，可以用于任意组件之间的通讯，而不需要父子组件之间的传递。但需要小心使用，以避免混乱

具体使用方式如下：

创建一个事件总线（eventBus）：

import Vue from 'vue'
export const eventBus = new Vue();

在需要接收事件的组件中，使用 $on 方法监听事件：

import { eventBus } from '@/eventBus.js'

export default {
  created() {
    eventBus.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent() {
      // do something
    }
  }
}

在需要触发事件的组件中，使用 $emit 方法触发事件：

import { eventBus } from '@/eventBus.js'

export default {
  methods: {
    handleClick() {
      eventBus.$emit('eventName')
    }
  }
}

需要注意的是，$ emit 方法可以携带参数，而 $on 方法接收的第二个参数为回调函数，也可以接收参数。因此，可以通过 $emit 方法将参数传递给 $on 方法中的回调函数。例如：

eventBus.$emit('eventName', 'hello world')

eventBus.$on('eventName', (param) => {
  console.log(param) // 输出 'hello world'
})

3. Custom Events（自定义事件）

子组件可以通过触发自定义事件来与父组件通信。

子组件：

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageToParent', 'Hello from child!');
    
  }
};
</script>

父组件：

<template>
  <child-component @messageToParent="handleMessageFromChild"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log('Message from child:', message);
    }
  }
};
</script>

4. $emit

除了用于触发自定义事件，$emit 也可以用于在子组件内触发父组件上的方法。

子组件：

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageToParent', 'Hello from child!');
    }
  }
};
</script>

父组件：

<template>
  <child-component @messageToParent="handleMessageFromChild"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log('Message from child:', message);
    }
  }
};
</script>

5. $parent 和 $children

可以通过 $ parent 和 $ children 直接访问父组件和子组件的实例。

父组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log('Child component instance:', this.$children[0]);
  }
};
</script>

子组件（ChildComponent.vue）：

<template>
  <div>Child Component</div>
</template>

<script>
export default {
  mounted() {
    console.log('Parent component instance:', this.$parent);
  }
};
</script>

6. Vuex（状态管理）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以在组件之间共享状态。

首先，需要安装 Vuex：

bash
npm install vuex --save

创建 Vuex store：

javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex',
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
});

在组件中使用 Vuex：

<!-- Component.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
  methods: {
    changeMessage() {
      this.$store.commit('updateMessage', 'New Message from Vuex');
    },
  },
};
</script>

以上是一些常用的 Vue.js 组件通信方式和示例。选择合适的方式取决于你的应用程序结构和需求。