Vue 常见通信
1、父子通信
父传子 props,子传父 events($emit);
通过父链 / 子链 通信$parent / $children;
$refs获取ref 可以访问组件实例方法,;
提供与注射provide / inject
a t t r s / attrs/attrs/listeners;
2、兄弟通信
Bus;
Vuex;
provide / inject
v2写法与v3不同需注意。v3官方API你值得拥有与阅读:https://cn.vuejs.org/guide/components/provide-inject.html
扛起大枪一起突突突突!
出现原因:解决prop 逐级透传 父一级与子N级传值获取的麻烦。
v2官方解释:provide 和 inject 绑定并不是可响应的(字符串类型的值)。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。
javascript
**v2 string**
// 父组件
data() {
return {
name: "卷儿"
}
},
provide: function() {
return {
newName: () => this.name
}
// 子组件
inject: ['newName'],
computed: {
hnewName() {
return this.newName()
}
}
<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>
**v2 obj**
// 父组件
data() {
return {
obj: {
name: "卷儿"
}
}
},
provide: function() {
return {
// 传递一个对象
obj: this.obj
}
},
// 子组件
inject: ['obj'],
computed: {
// 也可以不用计算属性重新定义
objName() {
return this.obj.name
}
}
<!-- 子组件中的使用方法 -->
<h2>obj的name: {{objName}}</h2>
<h2>obj的name: {{obj.name}}</h2>
V3采用ts语法,等我先学习一下哈哈哈哈。溜了溜了。