父子組件通信
絕大部分vue本身提供的通信方式,都是父子組件通信
最常見的組件通信方式之一,由父組件傳遞到子組件
最常見的組件通信方式之一,當子組件發生了某些事,可以通過event通知父組件
父組件可以向子組件傳遞style和class,它們會合并到子組件的根元素中
示例
父組件
? ? ? ? importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{? ? HelloWorld,? },};
子組件
? ? ?
{{msg}}
? exportdefault{name:"HelloWorld",props:{msg:String,? },};渲染結果:
如果父組件傳遞了一些屬性到子組件,但子組件并沒有聲明這些屬性,則它們稱之為attribute,這些屬性會直接附著在子組件的根元素上
不包括style和class,它們會被特殊處理
示例
父組件
? <!--除 msg 外,其他均為 attribute-->? importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{? ? HelloWorld,? },};
子組件
?
{{msg}}
?渲染結果:
子組件可以通過inheritAttrs: false配置,禁止將attribute附著在子組件的根元素上,但不影響通過$attrs獲取
在注冊事件時,父組件可以使用native修飾符,將事件注冊到子組件的根元素上
示例
父組件
? ? ? ? importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{? ? HelloWorld,? },methods:{handleClick() {console.log(1);? ? },? },};
子組件
?
Hello World
?渲染結果
子組件可以通過$listeners獲取父組件傳遞過來的所有事件處理函數
后續章節講解
和v-model的作用類似,用于雙向綁定,不同點在于v-model只能針對一個數據進行雙向綁定,而sync修飾符沒有限制
示例
子組件
?
? ? ? -? ? ? {{ num1 }}? ? ? +? ?
? ?? ? ? -? ? ? {{ num2 }}? ? ? +? ?
?父組件
? ? ? <!--等同于-->? importNumbersfrom"./components/Numbers.vue";exportdefault{components:{? ? Numbers,? },data() {return{n1:0,n2:0,? ? };? },};
在組件內部,可以通過$parent和$children屬性,分別得到當前組件的父組件和子組件實例
后續章節講解
父組件可以通過ref獲取到子組件的實例
示例
詳見:https://cn.vuejs.org/v2/api/?#provide-inject
如果一個組件改變了地址欄,所有監聽地址欄的組件都會做出相應反應
最常見的場景就是通過點擊router-link組件改變了地址,router-view組件就渲染其他內容
適用于大型項目的數據倉庫
適用于中小型項目的數據倉庫
組件通知事件總線發生了某件事,事件總線通知其他監聽該事件的所有組件運行某個函數