非父子、子与子组件之间传值是指，没有上下级关系或平级关系的组件之间的通讯传值。
下面先看一下Vue官方的介绍：
Vue官方的介绍
第一眼看个人的感觉是懵，第二眼还是懵，在其他网友那里找到了比较好理解的 https://www.jianshu.com/p/8e705bb0bb4b 原文请前往此网址，最下面有介绍。
接下来我就说一下我自己写的：
组件结构：
组件结构.jpg
在组件结构分别是：根组件、父组件、子组件，子组件需要两个
这里根组件我们不用App.vue组件，我们暂时创建一个叫 index.vue 的根组件；
界面展示：
界面.jpg
界面布局分三层：根组件（灰色区）、父组件（橘黄区），子组件（白色区）。
根组件（灰色区）：标题、接收传值的标签
父组件（橘黄区）：标题
子组件（白色区）：标题、按钮、接收传值的标签。其中 a1 界面多一个 接收传值的标签
对了，还有就是 index.vue 和 AA.vue 组件是使用了路由加载界面的
路由加载组件：
路由加载组件.jpg
父组件里加载子组件：
AA.vue 组件中a1.vue 和 b1.vue的组件没有使用路由
父组件加载子组件.jpg
我们先写这些组件，并展示。
如果你按照我这个写法，一定要走通程序，然后在写下面代码。切记！
我先把找的参考给大家复制出来；
网址：https://www.jianshu.com/p/8e705bb0bb4b
代码：
根组件（this.$root）
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的实例放到根组件下，所有的子组件都能调用
Bus: new Vue()
}
})
子组件 - bb 组件内调用事件触发：
<button @click="submit">提交<button>
methods: {
submit() {
// 事件名字自定义，用不同的名字区别事件
this.$root.$emit('eventName', 123)
}
}
子组件 - aa 组件内调用事件接收
// 当前实例创建完成就监听这个事件
created(){
this.$root.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在组件销毁时别忘了解除事件绑定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},
这是他剥离出来的代码，他自己实践的代码，我就不多写了，有兴趣可以去上面网站里看看。
下面就是我自己代码的实践
1、App.vue 组件
首先，我们要在 App.vue 组件中声明一个 Bus 属性，在这里我要先说明一下，上面我说的 index.vue 是根组件，其实这个一个假的根组件，真的根组件是 App.vue 组件，我是为了方便展示效果才这样的。
根组件.jpg
在 data的return中声明一个Bus的属性，并在后面那 new 一个新的Vue（），*这样是为了方便后面子组件使用。
2、 index.vue 组件
index 组件中标签是由两个 h3、router-link 和 router-view 组成。
index 组件中JS代码分别是在 data(){}、created: function(){}、methods:{}、beforeDestroy(){} 四个方法；
index.jpg
data(){}：在 data 中需要声明一个叫 mage 的key，来接收子组件传过来的值
created: function(){}：在 created 中需要使用 on 来监听 ‘eventName2’ 是否有变化，有变化则执行 print() 方法，并且在print() 方法中把 value 赋值给它
methods:{}：在 methods 中需要实现 print() 的方法，并在 print() 方法中使用 value 参数赋值给 mage
beforeDestroy(){}：在 beforeDestroy 方法销毁前，将解除对 ‘eventName2’ 的事件绑定
3、AA.vue 父组件
这个组件内并没有多少代码，看图自己写
AA.jpg
4、a1.vue 子组件
a1.jpg
（个人理解，如有写的不对，请指出，我会第一时间修改）
网友评论