Vue 父元件與子元件之間的通訊

2021-08-08 16:17:39 字數 434 閱讀 6078

1.父元件把資料傳遞給子元件

prop 是父元件用來傳遞資料的乙個自定義屬性。

父元件的資料需要通過 props 把資料傳給子元件,子元件需要顯式地用 props 選項宣告 "prop"

2.子元件把資料傳遞給父元件

父元件是使用 props 傳遞資料給子元件,但如果子元件要把資料傳遞回去,就需要使用自定義事件!

我們可以使用 v-on 繫結自定義事件, 每個 vue 例項都實現了事件介面(events inte***ce),即:

另外,父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

以下例項中子元件已經和它外部完全解耦了。它所做的只是觸發乙個父元件關心的內部事件。

vue元件,父元件與子元件之間通訊

vue元件,元件是乙個可復用的功能模組,即將具有相同功能的模組抽取成乙個元件,在需要的地方引用即可,這體現了 封裝的思想,下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...

Vue中父元件與子元件之間的通訊

prop 父元件向子元件傳遞資料,單向繫結 refs 父元件呼叫子元件裡的屬性和方法 emit 子元件向父元件傳遞訊息 新建專案 vue create demo cd demo npm run servecomponents child.vue 子元件h2 template 父元件h2 child ...

vue 子元件與父元件的通訊

子元件調父元件的方法 在子元件中通過this.parent.event通過 emit觸發乙個事件,父元件監聽這個事件 通過prop傳入父元件的方法 父元件 home.vue 子元件 helloworld.vue 通過 this.parent.event 呼叫父元件的方法 通過 emit 觸發乙個事件...