VUE兄弟组件之间传值$emit和$on的实战操作

在VUE中，兄弟组件之间的传值可以通过$emit和$on来实现。$emit用于触发事件，$on用于监听事件。下面是实现兄弟组件之间传值的详细步骤：

1. 在需要发送事件的组件中，使用$emit触发事件。例如：

this.$emit('my-event', data);

其中，'my-event'是事件名称，data是需要传递的数据。

2. 在需要接收事件的组件中，使用$on监听事件。例如：

this.$on('my-event', (data) => {
  // 处理接收到的数据
});

其中，'my-event'是事件名称，(data) => { ... }是事件处理函数。

3. 这样，当需要发送事件的组件触发$emit时，需要接收事件的组件就会接收到事件并执行相应的事件处理函数。

除了上述步骤外，在使用$emit和$on时还需要注意以下几点：

• 事件名称必须是一个字符串。
• 事件数据可以是任何类型。
• 事件处理函数可以是任何函数。
• 事件处理函数可以有多个参数。
• 可以使用$off来取消事件监听。

下面是一个使用$emit和$on实现兄弟组件之间传值的示例代码：

// 父组件
<template>
  <div>
    <button @click="handleClick">Send Data</button>
    <child-component @my-event="handleEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', 'Hello from parent component!');
    },
    handleEvent(data) {
      console.log('Received data from child component:', data);
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>Data from parent component: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    };
  },
  methods: {
    handleEvent(data) {
      this.data = data;
    }
  },
  mounted() {
    this.$on('my-event', this.handleEvent);
  },
  beforeDestroy() {
    this.$off('my-event', this.handleEvent);
  }
};
</script>

在这个示例中，父组件有一个按钮，点击按钮后会触发handleClick方法，该方法会通过$emit触发'my-event'事件，并将"Hello from parent component!"作为事件数据传递给子组件。子组件通过$on监听'my-event'事件，并在接收到事件后执行handleEvent方法，并将接收到的事件数据存储到data变量中。

通过这种方式，父组件和子组件就可以实现通信，父组件可以向子组件发送数据，子组件可以接收并处理这些数据。