新建一个文件bus.js
image.png
import Vue from 'vue'
export default new Vue
需要传出的组件
<a @click="jump('/pregnancy')">孕婴专区</a>
import Bus from '@/util/bus.js'
...
methods: {
jump(url) {
this.$router.push(url)
Bus.$emit('active', url)
}
}
需要接收的组件
import Bus from '@/util/bus.js'
...
mounted() {
let self = this
Bus.$on('active', (e) => {
self.activeIndex = e
console.log(`传来的数据是：${e}`)
})
},
Vue里组件的通信 通信：传参、控制（A操控B做一个事件）、数据共享 模式：父子组件间、非父子组件 父组件可以将一...
vue组件间通信的一些实用方法（VUE2.x） 一、父子组件间通信 常用的父子组件通信方法，一般涉及props和$...
VUE生命周期 VUE子传父组件通信 VUE非父子组件传值
非父子间的组件通信 父子链 子组件索引
一. Vue生命周期 二、生命周期代码 三、非父子组件通信 vue中非父子组件通信需要借助一个空的vue实例，案...
一、生命周期 二、组件通信 Vue只有两种关系， 父子组件 非父子组件 1.父子通信:当我们需要把父组件中的数据传...
新建一个文件bus.js 需要传出的组件 孕婴专区 需要接收的组件
Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面分别介绍每种通信方式且会说...
父子组件相互通信 非父子组件间通信 关于vuex请查阅： https://www.jianshu.com/writ...
1.组件间通信基本原则 2.vue 组件间通信方式 2.1组件间通信 1: props(适用于父子组件传递属性) ...
本文标题：2018-09-25 vue 非父子组件间通信
本文链接：https://www.haomeiwen.com/subject/htiloftx.html
网友评论