vue2怎么用mitt

在 vue.js 2 中使用 mitt，您可以跨组件层级进行通信和广播事件。1. 安装 mitt：npm install mitt --save。2. 创建 mitt 实例：import mitt from 'mitt'; const emitter = mitt();。3. 在组件中使用 mitt： 发射事件：emitter.emit('event-name', data);。 监听事件：emitter.on('event-name', (data) => {});。

如何在 Vue.js 2 中使用 mitt

什么是 mitt？

Mitt 是一个轻量级的事件总线库，允许 Vue.js 组件跨层级通信和事件广播。

如何使用 mitt

立即学习“前端免费学习笔记（深入）”；

要使用 mitt，请按照以下步骤操作：

1. 安装 mitt：

   npm install mitt --save

2. 创建 mitt 实例：

   import mitt from 'mitt';
   const emitter = mitt();

3. 在组件中使用 mitt：

   发射事件：

   emitter.emit('event-name', data);

   监听事件：

   emitter.on('event-name', (data) => {
     // 处理事件
   });

实例

假设您有一个父组件和两个子组件：

• 父组件：

  <template><child1></child1><child2></child2></template><script>
  import mitt from 'mitt';
  import Child1 from './Child1.vue';
  import Child2 from './Child2.vue';
  
  export default {
    components: { Child1, Child2 },
    data() {
      return {
        emitter: mitt(),
      };
    },
    methods: {
      emitEvent() {
        this.emitter.emit('custom-event', { message: 'Hello world!' });
      },
    },
  };
  </script>

• 子组件 1：

  <template><button>Trigger Event</button>
  </template><script>
  import mitt from 'mitt';
  
  export default {
    data() {
      return {
        emitter: mitt(),
      };
    },
    methods: {
      handleEvent() {
        this.emitter.emit('custom-event', { message: 'Triggered from Child 1!' });
      },
    },
  };
  </script>

• 子组件 2：

  <template><p>{{ message }}</p>
  </template><script>
  import mitt from 'mitt';
  
  export default {
    data() {
      return {
        emitter: mitt(),
        message: '',
      };
    },
    created() {
      this.emitter.on('custom-event', (data) => {
        this.message = data.message;
      });
    },
  };
  </script>

在这个示例中，父组件创建了 mitt 实例并将其传递给子组件。子组件 1 使用 mitt 发射事件，而子组件 2 使用 mitt 监听事件并更新其消息。