Nuxtjs中不同组件之间响应Dialog

1、新建event-bus.ts文件

1
2
3

import Vue from 'vue'

Vue.prototype.$bus = new Vue();

可以全局使用

2、nuxt.config.js中添加eventbus变量

可以通过root全局使用

1 2	plugins: ['~/plugins/swiper.ts', '~/plugins/element-ui.ts', '~/plugins/event-bus.ts'], //因为event-bus文件在plugins的文件夹中

3、需要传递值的文件

1
2
3
4
5
6

//引入root 不用import eventbus文件，直接使用根中的$bus属性，利用$emit传值
setup(props, { root }) {
function setContactDialog() {
root.$bus.$emit('contactDialogVisible', true);
}
}

4、需要接收值的文件

1
2
3
4
5
6
7
8
9
10
11
12
13

//import ref 监听变量
import { defineComponent, ref, reactive, useContext, computed } from 'nuxt-composition-api';

setup(props, { root }) {
const contactDialogVisible = ref(false); //监听可变化的属性

root.$bus.$on('contactDialogVisible', function (val) {
contactDialogVisible.value = val;
});
return {
contactDialogVisible
}
}