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
示例代码<router-link to="/home">home</router-link> //to 要跳转的路径

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

2.3 如何传递参数
示例代码1this.$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.想在哪里显示?在哪里添加<router-view></router-view>
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()

})

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页