Vue.js 从零开始 mitt

还记得区域元件有自己的作用域吗？已知外层元件可以跟内层元件传递资料(props)，或是传递事件(emit)，但是当有另外两个子元件，彼此需要传递又该怎麽做？

`mitt` 介绍

概念图：

Vue 2中要进行跨元件常使用的方式就是Event Bus，只要使用$on与$emit这两个语法，就能达到跨元件的沟通，但是在Vue 3移除了$on、$emit..等语法。

Vue 3 可以使用mitt套件来达成相同作用，写法与Vue 2的Event Bus相当接近。

mitt参考文件

`mitt` 建立

选择其中下列两个方式

npm安装：

$ npm install --save mitt

cdn引入：

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

建立mitt()实体，指定到emitter上：

const emitter = mitt();

<div id="app">
        <h4>{{ text }}</h4>
        <con-tainer></con-tainer>
        <con-tainer2></con-tainer2>
    </div>

const emitter = mitt();
const app = Vue.createApp({
  data() {
    return {
      text: "外部元件"
    };
  }
});
app.component("ConTainer", {
  data() {
    return {
      text: "component1",
      componentText: "由元件1传入的文字",
    };
  },
  methods: {
    click() {
      emitter.emit('componentText', this.componentText);
    }
  },
  template: `<div>
    <h4>{{ text }}</h4>
    <button @click="click">Click me!</button>
  </div>`
});
app.component("ConTainer2", {
  data() {
    return {
      text: "component2",
      componentText: ""
    };
  },
  created() {
    emitter.on('componentText', (data) => {
      this.componentText = data;
    })
  },
  template: `<div>
    <h4>{{ text }}</h4>
    <h4>{{ componentText }}</h4>
  </div>`
});
app.mount('#app');

定义要传出去的资料，emitter.emit('componentText', this.componentText);，传递component1里data的componentText的值。
定义接收emitter.on，(data)里就是emitter.emit传出来的值。

上面范例就是mitt的使用方法，比slot简单又好写呢。