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

绝地灬酷狼 2024-03-16 16:26 45阅读 0赞

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

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

![在这里插入图片描述][da25d2830a3a4363a147d4b5d757ed48.png]

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

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

### 总结 ###

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

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

[da25d2830a3a4363a147d4b5d757ed48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1bd6149b55c24c2b8d205ee0192c585f.png