在vue2的项目想实现一个功能,我现在有A和B两个没有任何父子关系的组件,我希望在A组件中的某个值发生改变的时候,控制B组件中某个div标签的显隐性,请问我该如何操作
时间: 2024-03-21 20:44:07 浏览: 52
可以通过使用事件总线来实现A组件和B组件之间的通信。具体步骤如下:
1. 在main.js中新建一个空的Vue实例,并将其作为事件总线,可以命名为`eventBus`。
```javascript
import Vue from 'vue';
export const eventBus = new Vue();
```
2. 在A组件中,当某个值发生改变时,通过`eventBus`实例触发一个自定义事件。
```javascript
// A.vue
import { eventBus } from '@/main.js';
export default {
data() {
return {
value: ''
};
},
methods: {
handleChange() {
// value值改变时触发自定义事件
eventBus.$emit('valueChanged', this.value);
}
}
};
```
3. 在B组件中,通过`eventBus`实例监听自定义事件,并在回调函数中修改div标签的显隐性。
```javascript
// B.vue
import { eventBus } from '@/main.js';
export default {
data() {
return {
showDiv: false
};
},
created() {
// 监听自定义事件
eventBus.$on('valueChanged', value => {
// 根据接收到的value值修改showDiv的值
if (value === 'xxx') {
this.showDiv = true;
} else {
this.showDiv = false;
}
});
}
};
```
这样,当A组件中的某个值发生改变时,通过事件总线触发自定义事件,B组件监听到事件后根据接收到的值修改div标签的显隐性。
阅读全文