21.组件通信方式

1.父子通信

1.props和$emit
2.$attrs和$emit
3.provide/inject(父组件注入数据子组件都能使用)
4.vuex中取
5.全局事件总线
6.$parent和$children(父实例和子实例)

2.跨级通信（祖孙通信）

1.$attr和$emit
2.provide/inject(父组件注入数据子组件都能使用)
3.vuex中取
4.全局事件总线

3.兄弟组件通信

1.vuex中取
2.全局事件总线

22.路由传参的几种方式

1.通过params传参

1.页面接收参数用this.$route.params
需要给路由配置name，也就是命名路由
2.页面接收参数
this.$route.params.productId

2.动态路由传参

在路由配置里实现
1。在配置路由页面给路由路径后加：id用来预存接收传来的值
2. 页面跳转传值的格式为 可直接在跳转后给值
3. 页面接收值用this.$route.params.id接收

  1. // 路由配置，
  2. {
  3.    path: 'detail/:id,         
  4.    name: 'detail',
  5.    component: Detail
  6.  }
  7. // 页面 
  8. <router-link to="/detail/19"></router-link>
  9. // 获取参数
  10. this.$route.params.id(上面配置是id,这里就用id来接收参数)

3.通过query传参

传参格式为

  1. 1.页面内点击事件路由跳转传参
  2.        this.$router.push({
  3.          path: '/my',
  4.          query: {
  5.            id:'10010'
  6.          }
  7.        })

1.页面接收参数用this.$route.query

23.vuex与全局对象的区别及使用

区别一： Vuex 的状态存储是响应式的 ,而全局变量不是
区别二： Vuex里的状态不能直接修改，要通过提交方法才可以修改，方便追踪变量变换，全局变量不行
区别三： 全局变量多了会造成命名污染，vuex不会，同时解决了父组件与孙组件，以及兄弟组件之间通信的问题。