面試題:vue組件之間有哪些通信方式?

父子組件通信

絕大部分vue本身提供的通信方式,都是父子組件通信

prop

最常見的組件通信方式之一,由父組件傳遞到子組件

event

最常見的組件通信方式之一,當子組件發生了某些事,可以通過event通知父組件

style和class

父組件可以向子組件傳遞style和class,它們會合并到子組件的根元素中

示例

父組件

? ? ? ? importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{? ? HelloWorld,? },};

子組件

? ? ?

{{msg}}

? exportdefault{name:"HelloWorld",props:{msg:String,? },};

渲染結果:

attribute

如果父組件傳遞了一些屬性到子組件,但子組件并沒有聲明這些屬性,則它們稱之為attribute,這些屬性會直接附著在子組件的根元素上

不包括style和class,它們會被特殊處理

示例

父組件

? <!--除 msg 外,其他均為 attribute-->? importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{? ? HelloWorld,? },};

子組件

?

? ?

{{msg}}

?
exportdefault{name:"HelloWorld",props:{msg:String,? },created() {console.log(this.$attrs);//得到: { "data-a": "1", "data-b": "2" }? },};

渲染結果:


子組件可以通過inheritAttrs: false配置,禁止將attribute附著在子組件的根元素上,但不影響通過$attrs獲取

natvie修飾符

在注冊事件時,父組件可以使用native修飾符,將事件注冊到子組件的根元素上

示例

父組件

? ? ? ? importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{? ? HelloWorld,? },methods:{handleClick() {console.log(1);? ? },? },};

子組件

?

? ?

Hello World

?

渲染結果

$listeners

子組件可以通過$listeners獲取父組件傳遞過來的所有事件處理函數

v-model

后續章節講解

sync修飾符

和v-model的作用類似,用于雙向綁定,不同點在于v-model只能針對一個數據進行雙向綁定,而sync修飾符沒有限制

示例

子組件

?

? ?

? ? ? -? ? ? {{ num1 }}? ? ? +? ?

? ?

? ? ? -? ? ? {{ num2 }}? ? ? +? ?

?
exportdefault{props:["num1","num2"],};

父組件

? ? ? <!--等同于-->? importNumbersfrom"./components/Numbers.vue";exportdefault{components:{? ? Numbers,? },data() {return{n1:0,n2:0,? ? };? },};

$parent和$children

在組件內部,可以通過$parent和$children屬性,分別得到當前組件的父組件和子組件實例

$slots和$scopedSlots

后續章節講解

ref

父組件可以通過ref獲取到子組件的實例

跨組件通信

Provide和Inject

示例

詳見:https://cn.vuejs.org/v2/api/?#provide-inject

router

如果一個組件改變了地址欄,所有監聽地址欄的組件都會做出相應反應

最常見的場景就是通過點擊router-link組件改變了地址,router-view組件就渲染其他內容

vuex

適用于大型項目的數據倉庫

store模式

適用于中小型項目的數據倉庫

eventbus

組件通知事件總線發生了某件事,事件總線通知其他監聽該事件的所有組件運行某個函數

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • (掌握)簡單說下setTimeout(fn, 0)中的0代表的是什么?如果我想在vue實現此功能可以用什么方法代替...
    Enginner_XZ閱讀 5,642評論 0 40
  • (掌握)簡單說下setTimeout(fn, 0)中的0代表的是什么?如果我想在vue實現此功能可以用什么方法代替...
    Grit_1024閱讀 1,427評論 0 22
  • #同一個路由下,父向子組件傳值 props屬性 -- 單向綁定 父組件中給childOne綁定一個自定義靜態pro...
    似風的蝸牛閱讀 706評論 0 0
  • 做這個的初心是希望能鞏固自己的基礎知識,當然也希望能幫助更多的開發者,如發現答案不準確或者不完整的可前往 Gith...
    打不死的強丿閱讀 38,049評論 5 123
  • 今天感恩節哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會,身份的轉變要...
    迷月閃星情閱讀 10,607評論 0 11