Vue.js 中的 $emit 和 $on 方法有什么区别？

Vue.js 中的 $emit 和 $on 方法有什么区别？

在 Vue.js 中，$emit 和 $on 方法是两个常用的方法，用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件，并在另一个组件中监听这个事件，从而实现组件间的数据传递和交互。虽然它们的名字很相似，但它们的作用和用法有所不同。本文将介绍 $emit 和 $on 方法的区别，并通过代码示例来说明它们的用法。

$emit

$emit 方法是 Vue.js 中用于触发自定义事件的方法。它可以让我们在一个组件中触发一个自定义事件，并向父组件或祖先组件派发这个事件。在触发事件时，我们可以传递任意数量的参数，这些参数可以在监听事件的组件中获取到。

下面是一个使用 $emit 方法的示例代码：

// 定义一个名为 myButton 的组件
Vue.component('my-button', {
  template: `
    <button @click="onClick">Click me</button>
  `,
  methods: {
    onClick: function () {
      this.$emit('clicked', 'Hello, world!')
    }
  }
})

// 定义一个名为 myApp 的组件，并在其中监听 myButton 组件的 clicked 事件
Vue.component('my-app', {
  template: `
    <div>
      <my-button @clicked="onButtonClicked"></my-button>
      <p>{{ message }}</p>
    </div>
  `,
  data: function () {
    return {
      message: ''
    }
  },
  methods: {
    onButtonClicked: function (msg) {
      this.message = msg
    }
  }
})

在上面的代码中，我们定义了一个名为 myButton 的组件。这个组件中有一个按钮，当用户点击按钮时，会触发一个名为 clicked 的自定义事件，并将字符串 ‘Hello, world!’ 作为参数传递给事件处理函数。

然后，我们定义了一个名为 myApp 的组件，并在其中监听 myButton 组件的 clicked 事件。当 myButton 组件触发 clicked 事件时，myApp 组件中的 onButtonClicked 方法就会被调用，并将传递给事件处理函数的参数赋值给组件中的 message 数据，从而更新视图。

需要注意的是，$emit 方法只能向父组件或祖先组件派发事件，不能向子组件或后代组件派发事件。这是因为 Vue.js 中的事件传递是基于 DOM 树的，父组件可以通过 props 将数据传递给子组件，但是子组件不能直接向父组件传递数据。

$on

$on 方法是 Vue.js 中用于监听自定义事件的方法。它可以让我们在一个组件中监听一个自定义事件，并在事件触发时执行一个回调函数。在监听事件时，我们可以指定一个可选的参数，用于限制事件的作用域，使得事件只在指定的组件中有效。

下面是一个使用 $on 方法的示例代码：

// 定义一个名为 myButton 的组件，并在其中触发一个 clicked 事件
Vue.component('my-button', {
  template: `
    <button @click="onClick">Click me</button>
  `,
  methods: {
    onClick: function () {
      this.$emit('clicked', 'Hello, world!')
    }
  },
  created: function () {
    this.$emit('clicked', 'Hello, world!')
  }
})

// 定义一个名为 myApp 的组件，并在其中监听 myButton 组件的 clicked 事件
Vue.component('my-app', {
  template: `
    <div>
      <my-button></my-button>
      <p>{{ message }}</p>
    </div>
  `,
  data: function () {
    return {
      message: ''
    }
  },
  created: function () {
    this.$on('clicked', this.onButtonClicked)
  },
  methods: {
    onButtonClicked: function (msg) {
      this.message = msg
    }
  }
})

在上面的代码中，我们定义了一个名为 myButton 的组件，并在其中触发一个 clicked 事件。在 myApp 组件中，我们使用 $on 方法监听 myButton 组件的 clicked 事件，并指定该事件只在 myApp 组件中有效。当 myButton 组件触发 clicked 事件时，myApp 组件的 onButtonClicked 方法就会被调用，并将传递给事件处理函数的参数赋值给组件中的 message 数据，从而更新视图。

需要注意的是，$on 方法只能监听已经派发的事件，不能监听尚未派发的事件。因此，在上面的代码中，我们在 myButton 组件的 created 钩子函数中手动触发了 clicked 事件，以便 myApp 组件可以监听到该事件。

区别

$emit 和 $on方法的区别主要在于它们的作用和用法。$emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而 $on方法用于监听自定义事件并在事件触发时执行回调函数。$emit 方法必须在组件内部使用，而 $on 方法可以在任何地方使用，包括组件内部和组件外部。

另外，$emit 方法可以传递任意数量的参数，而 $on方法只能传递一个参数，这个参数就是事件处理函数在接收到事件时传递的数据。$emit 方法只能向父组件或祖先组件派发事件，而 $on 方法可以监听任意组件派发的事件。

总结

$emit 和 $on方法是Vue.js中用于实现组件间通信的两个重要方法。$emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而 $on方法用于监听自定义事件并在事件触发时执行回调函数。$emit 方法必须在组件内部使用，而 $on方法可以在任何地方使用，包括组件内部和组件外部。$emit 方法可以传递任意数量的参数，而 $on方法只能传递一个参数。$emit 方法只能向父组件或祖先组件派发事件，而 $on 方法可以监听任意组件派发的事件。

在实际开发中，$emit 和 $on 方法经常被用来实现父子组件之间的数据传递和交互。通过熟练掌握这两个方法的用法，我们可以更加灵活地组织组件间的关系，提高组件的复用性和可维护性。