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 還是可響應的。
**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語法,等我先學習一下哈哈哈哈。溜了溜了。