Vue 发送事件加变量

在Vue中，我们可以使用事件来进行组件之间的通信。发送事件时，有时候需要传递一些变量给接收方组件，以便接收方能够根据这些变量做出相应的处理。本文将向你介绍如何在Vue中发送事件时附带变量。

1. 定义事件发送方组件

首先，我们需要定义一个事件发送方组件。这个组件将会发送一个名为myEvent的事件，并传递一个变量data给事件接收方。

<template>
  <button @click="sendEvent">发送事件</button>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      const data = 'Hello, World!';
      this.$emit('myEvent', data);
    }
  }
}
</script>

在上面的代码中，我们使用了$emit方法来发送一个myEvent事件，并传递了一个字符串变量data。

2. 定义事件接收方组件

接下来，我们需要定义一个事件接收方组件，它将会接收到来自发送方组件的myEvent事件，并处理传递过来的变量。

<template>
  <div>
    <h2>接收到的变量: {{ receivedData }}</h2>
  </div>
</template>

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

在上面的代码中，我们使用了$on方法来监听来自根实例的myEvent事件，并将其绑定到handleEvent方法上。在mounted钩子函数中，我们将事件监听的绑定写在根实例上，以便在整个应用中都可以接收到事件。在beforeDestroy钩子函数中，我们取消了事件的监听，以防止内存泄漏。

3. 使用这两个组件

最后，我们需要在应用的入口文件App.vue中使用这两个组件。

<template>
  <div>
    <event-sender></event-sender>
    <event-receiver></event-receiver>
  </div>
</template>

<script>
import EventSender from './components/EventSender.vue';
import EventReceiver from './components/EventReceiver.vue';

export default {
  components: {
    EventSender,
    EventReceiver
  }
}
</script>

在上面的代码中，我们引入了两个组件EventSender和EventReceiver并在模板中使用它们。

现在，当我们点击EventSender组件中的按钮时，EventReceiver组件将会接收到事件，并显示接收到的变量。

这就是在Vue中发送事件加变量的方法。希望本文能对你有所帮助！

请注意，上面的代码片段是以Vue单文件组件（.vue）的形式展示的，所以在实际使用中需要使用Vue的单文件组件开发工具（如Vue CLI）进行编译和打包。