vue组件间通讯 方式总结

@[toc]

1. 对外参数 props 父=>子

子组件声明

//第一种写法
props:["data1","data2"] //两个属性

//第二种写法
props:{
   data1:String//名称:数据类型 
}

//第三种写法
props:{
   data1:{//名称
       type:String,
       default:()=>""//默认值
   }
}

//第四种写法
props:{
   data1:{//名称
       type:[String,Array] //类型
       default(){
           return [];//Array或Object返回值 必须是方法 return
       } //默认值
   }
}

父组件 实例标签上应用

<组件名 data1="xxx"></组件名>
<组件名 :data1="xxx"></组件名>

2. 找爹$parent$children 子=>父 父=>子

只找到上（下）级组件 [自定组件又包含了其他组件，子组件作为插槽 只找到最近组件]

找到头是 $root

不适合多层嵌套

this.$parent.xxx //.$refs//$el//找爹

3. 实例名称 $refs 父=>子

只会在绘制（渲染）完成后生效，并且不是响应式，避免在计算属性中访问

注册 实例上：

<组件名 ref="zujian1"></组件名>

使用：

this.$refs.zujian1 //.$refs["zujian1"]

//如果有动态改变 影响渲染 需要配合nextTick
 this.$nextTick(() => {
   this.$refs.zujian1.$el //$data //fn() 
 })

4. 事件 $emit$on 子=>父

子组件 触发

this.$emit('事件名称',参数1,参数2...) //触发事件

父组件 注册 实例上

<组件名 @事件名称="方法"></组件名>
...

方法(参数1,...ags){ //参数

}

$listeners 多层组件使用 父组件直接注册到深层组件

子组件 继承传递

v-on="$listeners"

5. 公交 Bus

全局

const bus = new Vue();
bus.$emit();

6. 依赖注入 provide inject 父=>子

父组件注册注入

  provide() {
    return {//必须要返回
      AssetA1: this//参数名 : [方法,对象,属性]
    };
  },

所有子组件 都可以引用

inject: ["AssetA1", "thisdialog"] //注意名称
...
this.thisdialog.close()

7. Vuex 全局状态机 重

modules mutations actions getters state

 this.$store.dispatch("TabView/cachedViews", xxx);//调用

  computed: {//计算属性
    getxxx() {
      const name = this.$store.getters["TabView/cachedViews"];//值改变了
      return name.toString();
    },
  }