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/$listener
$attrss解决多级组件间传值的问题
//$atters 将父组件中的不包含props的属性传入子组件，通常配合interitAttrs选项一起使用
//$listener监听子组件中数据，传递给父组件

【总结2】$attrs/$listene
1.在最外层组件里面统一传值，或其他组件里面传值
2.在需要接收这个值的组件，接收数据。父组件绑定一个属性，就可以在这个组件里面获取到所有父组件传递过来的数据，可以通过this.$arrts

关于vue-router
1.什么是路由
路由在我们单页面应用中，是一个很重要的角色，它是用来切换组件的。
单页应用当中，没有页面这个概念，因为只有一个页面(index.html),通过切换主建来切换跳转不同页面的效果，也就是说vue-router是实现组件切换的。

2.路由的跳转
2.1 router-link
示例代码：home //to 要跳转的路径

2.2 编程式导航
不通过router-link调转，通过事件的方式来跳转（函数式）
示例代码：this.$router.push({path: '/home'})  //({path: '/home'}是对象

2.3 如何传递参数
示例代码1：this.$router.push({path: '/home', query: {name: 'zhangsan'}} )
示例代码2：this.$router.push({ name: 'home', params: {id: '3'}} )  //动态路由传参
注意 path和name进行搭配，name和params进行搭配

3.动态路由
商品详情页，通过id不同展示不一样的页面。
需要在url上面定义一个参数，用这个参数来获取id,根据id的不同，来请求不一样的数据（也就是说定义一个动态路由）

3.1配置动态路由
  {
    path: '/home/:id',   //动态路由，需要传递参数(id)的页面
    component: () => import('../views/Home.vue'),   //主键
  }

3.2获取参数

示例代码：{$route.params.id}}

4.嵌套路由
需要在一个组件里面显示另外一个组件
例如：布局，头部和底部是默认的两个组件，不同的是中间的部分
例如：在home.vue显示子组件
1.想在哪里显示？在哪里添加
2.定义子组件路由主键
 {
    path: '/home/:id',
    component: () => import('../views/Home.vue'), 
    children: [{
      path: '/child',
      component: () => import('../views/Child.vue')

    }]
  }

5.导航守卫

代码如下：

router.beforeEach((to,from,next) =>{

console.log(to.path) //输出访问的路由的访问路径

next()

})