javascript Vue 3事件总线与组合API

iaqfqrcu 于 2023-01-19 发布在 Java

关注(0)|答案(3)|浏览(166)

我已经设置了mitt并尝试将事件分派到另一个组件，但我遇到了困难，因为在setup()方法中，它没有用于访问应用程序示例的this。
下面是我的尝试：

import App from './App.vue'
const el = document.getElementById('app')

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

const app = createApp(App)
app.config.globalProperties.emitter = emitter;
app.mount(el);

在组件中，我希望分派一个事件

export default {
   setup() {
      function toggleSidebar() {
          this.emitter.emit('toggle-sidebar');

          console.log(this); // binds to setup(), not the vue instance.
      }
   }
}

由于this不存在，我无法访问.emitter。我错过了什么？如何在Vue 3组合API中使用官方建议的手套？
顺便说一下，如果我使用v2语法，我可以访问this.emitter。但我对Composition API的方式很好奇

export default {
  mounted() {
    console.log(this.emitter); // works
  }
}

JavaScript

来源：https://stackoverflow.com/questions/66537320/vue-3-event-bus-with-composition-api

3条答案

按热度按时间

fivyi3re1#

要在Vue 3组合API中使用事件总线，请在 main.js 中使用Vue 3的新provide API，然后在任何组件中使用inject：

1.安装mitt：

npm install mitt

2.提供：

主文件.js*

import { createApp } from 'vue';
import App from './App.vue';

import mitt from 'mitt';                  // Import mitt
const emitter = mitt();                   // Initialize mitt

const app = createApp(App);
app.provide('emitter', emitter);          // ✅ Provide as `emitter`
app.mount('#app');

3.注入

3a. * 任何组件 * -发出事件

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject('emitter'); // Inject `emitter`
    const mymethod = () => {
      emitter.emit('myevent', 100);
    };
    return {
      mymethod
    }
  }
}

从一个按钮点击或什么调用mymethod。
3b. * 任何组件 * -侦听事件

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject('emitter');   // Inject `emitter`

    emitter.on('myevent', (value) => {   // *Listen* for event
      console.log('myevent received!', `value: ${value}`);
    });
  },
}

控制台 *

myevent received! value: 100

赞(0）回复(0）举报 2023-01-19

xqnpmsa82#

您可以使用getCurrentInstance来获取全局属性
组分：

import { getCurrentInstance } from 'vue';
export default {
  setup() {
    // get current instance
    const internalInstance = getCurrentInstance(); 
    // get the emitter from the instance
    const emitter = internalInstance.appContext.config.globalProperties.emitter;
  }
}

赞(0）回复(0）举报 2023-01-19

yqyhoc1h3#

到目前为止，我已经使用这段代码使“发射器”可用。

//main.ts
import mitt from 'mitt'
const emitter = mitt()
export default emitter

在我使用的组件内部

import emitter from '@/main';

到目前为止，这在Vue 2和Vue 3中是有效的--至少在使用选项API时是如此。
我不得不承认，我目前在使用新的vite服务器和hot module reload（hmr）时遇到了一些麻烦，这种风格在任何方面都不是最佳的吗？

赞(0）回复(0）举报 2023-01-19

我来回答

javascript Vue 3事件总线与组合API

3条答案

相关问题

热门标签

最新问答