详解Vue2.0 事件派发与接收

下面我会详细讲解“详解Vue2.0 事件派发与接收”的完整攻略。

什么是事件派发与接收

在Vue中，事件可以从父组件向子组件传递（事件派发），也可以从子组件向父组件传递（事件接收）。这种事件的传递机制，可以实现组件之间的通信和数据交互，非常强大。

事件派发

在父组件中，我们可以通过$emit方法派发事件，传递数据给子组件。代码示例如下：

<template>
  <div>
    <button @click="dispatchMessage">派发事件</button>
    <Child :msg="message"></Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    dispatchMessage() {
      this.$emit('receive-msg', this.message)
    }
  }
}
</script>

以上代码中，我们定义了一个父组件，里面包含一个按钮，点击按钮后派发事件，并将message作为数据传递给子组件。派发事件的方法是$emit，接收两个参数：事件名称和传递的数据。

接下来，我们来编写子组件。代码示例如下：

<template>
  <div>{{ msg }}</div>
</template>

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

以上代码中，我们定义了一个子组件，并通过props接收来自父组件的数据，在模板中展示出来。

最后，我们需要在父组件中监听自定义事件，并执行相应的处理逻辑。代码如下：

<template>
  <div>
    <button @click="dispatchMessage">派发事件</button>
    <Child :msg="message" @receive-msg="handleMessage"></Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    dispatchMessage() {
      this.$emit('receive-msg', this.message)
    },
    handleMessage(msg) {
      console.log(msg) // 输出：Hello World
    }
  }
}
</script>

以上代码中，我们在子组件上监听了receive-msg事件，并在父组件中定义了handleMessage方法，用来处理数据。当子组件接收到事件后，就会触发父组件中的事件回调函数，把传递的数据作为参数传递给它。在处理函数中，我们可以使用该数据进行相应的操作。

事件接收

除了从父组件向子组件传递事件，Vue也支持从子组件向父组件传递事件。在子组件中，我们可以通过$emit方法来派发自定义事件，并将数据传递给父组件。代码示例如下：

<template>
  <div>
    <button @click="dispatchMessage">派发事件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    dispatchMessage() {
      this.$emit('receive-msg', this.message)
    }
  }
}
</script>

以上代码中，我们定义了一个子组件，并在其中绑定了一个按钮，点击按钮后调用dispatchMessage方法，该方法会派发receive-msg事件，并将message作为数据传递给父组件。

在父组件中，我们需要监听自定义事件并执行相应的处理逻辑。代码示例如下：

<template>
  <div>
    <button @click="getMessage">获取子组件数据</button>
    <Child @receive-msg="handleMessage"></Child>
  </div>
</template>

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

export default {
  components: { Child },
  methods: {
    handleMessage(msg) {
      console.log(msg) // 输出：Hello World
    },
    getMessage() {
      const childComponent = this.$refs.child
      console.log(childComponent.message) // 输出：Hello World
    }
  }
}
</script>

以上代码中，我们在父组件中引入了子组件，并在子组件上监听了自定义事件receive-msg。当子组件派发该事件时，就会触发父组件中的事件回调函数handleMessage，并将传递的数据作为参数传递给它。在处理函数中，我们可以使用该数据进行相应的操作。

同时，我们也可以通过$refs来获取子组件实例，从而获取其数据。在以上代码中，我们在父组件中定义了一个getMessage方法，用来获取子组件实例，并输出其数据message。