vue3 组件通信、vue-router

 

关于组件通信
1.父子组件间传值
props/$emit
$parent/ children
$ref

2.非父子组件传值
事件总线
//原理就是建立一个公共的js文件，专门用来传递信息
//bus.js
import Vue from 'vue'
export default  new Vue()
//在需要传递消息的地方引入
import bus from './util/bus'
//传递消息
bus.$emit('msg', val)
//接收消息
bus.$on('msg',(val) => {
  console.log(var)
});

【总结1】通过事件总线传递一个数据
1）需要传递数据的地方引入bus.js文件
2）在App.vue中触发自定义事件
3）在child.vue中通过bus.$on监听事件，监听事件会触发一个回调函数，这回调函数会接受一个参数，当时传递自定义事件传递过来的参数。
4）把这个参数放入想要的数据里面接收

$attrs/$liste