vue组件间通讯 方式总结
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();
},
}