vue 常用组件通讯总结，包括互相调用方法

一、props （父传字，父组件用自定义属性，太常见，不多说）
这个应该非常属性,就是父传子的属性;
props 值可以是一个数组或对象;

// 对象
props:{
 inpVal:{
  type:Number, //传入值限定类型
  // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
  required: true, //是否必传
  default:200,  //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
  validator:(value) {
    // 这个值必须匹配下列字符串中的一个
    return [ success ,  warning ,  danger ].indexOf(value) !== -1
  }
 }
}

二、$emit （父传子）
这个也应该非常常见，不多说

// 父组件
<home @title="title">
// 子组件
this.$emit( title ,[{title: 这是title }])

三、vuex
1.这个也是很常用的,vuex 是一个状态管理器
2.是一个独立的插件,适合数据共享多的项目里面,因为如果只是简单的通讯,使用起来会比较重，我比较喜欢用vue2.6.0刚加的observable，也是多组件数据状态共享，跟vuex使用放法很像，后面写个博客单独说
3、不止限制于父子组件

四、$attrs和$listeners
2.4.0 新增
这两个是不常用属性,但是高级用法很常见;
1、如果父传子有很多值那么在子组件需要定义多个，解决父传子中未在prop中定义的值

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>
// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

相对应的如果子组件定义了 props,打印的值就是剔除定义的属性

props: {
  width: {
    type: String,
    default:   
  }
},
mounted() {
  console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"}
},

2、子组件需要调用父组件的方法解决父组件的方法可以通过listeners" 传入内部组件——在创建更高层次的组件时非常有用

// 父组件
<home @change="change"/>
// 子组件
mounted() {
  console.log(this.$listeners) //即可拿到 change 事件
}

五、provide和inject
2.2.0 新增，我以前博客写过，可以去看，这里就不多说了，这个不止限制于父子组件，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

六、$parent和$children
$parent和$children 并不保证顺序，也不是响应式的，只能拿到一级父组件和子组件

//父组件
mounted(){
  console.log(this.$children) 
  //可以拿到 一级子组件的属性和方法
  //所以就可以直接改变 data,或者调用 methods 方法
}
//子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

七、$refs

// 父组件
<home ref="home"/>
mounted(){
  console.log(this.$refs.home) //即可拿到子组件的实例,就可以直接操作 data 和 methods
}

八、$root

// 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

九、v-slot
插槽其实我并不常用，可以去看官方网站，我等详细研究一下，再补吧

十、 EventBus
1.就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据，事件监听都存储到这个变量上;
2.类似于 Vuex。但这种方式只适用于极小的项目，用多了容易乱，代码不好维护
3.原理就是利用和emit 并实例化一个全局 vue 实现数据共享
4.可以实现平级,嵌套组件传值,但是对应的事件名eventTarget必须是全局唯一的

// 在 main.js
Vue.prototype.$eventBus=new Vue()
// 传值组件
this.$eventBus.$emit( eventTarget , 这是eventTarget传过来的值 )
// 接收组件
this.$eventBus.$on("eventTarget",v=>{
  console.log( eventTarget ,v);//这是eventTarget传过来的值
})

十一、路由传参
这个也挺常用，简单说一下吧

// 路由定义
{
  path:  /describe/:id ,
  name:  Describe ,
  component: Describe
}
// 页面传参
this.$router.push({
  path: `/describe/${id}`,
})
// 页面获取
this.$route.params.id

// 路由定义
{
  path:  /describe ,
  name:  Describe ,
  omponent: Describe
}
// 页面传参
this.$router.push({
  name:  Describe ,
  params: {
    id: id
  }
})
// 页面获取
this.$route.params.id

// 路由定义
{
  path:  /describe ,
  name:  Describe ,
  component: Describe
}
// 页面传参
this.$router.push({
  path:  /describe ,
    query: {
      id: id
  `}
)
// 页面获取
this.$route.query.id

上面第二个，参数不会拼接在路由后面,页面刷新参数会丢失
方案一和三参数拼接在后面,丑,而且暴露了信息