Vue元件通訊

2021-08-29 07:16:34 字數 697 閱讀 8267

vue的子元件用$.emit()來觸發事件,父元件用$.on()來監聽子元件的的事件 +1

-1測試啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

上面示例中,子元件有兩個按鈕,分別實現+1、-1的效果,在改變元件的data 「count」,通過$.emit()再把他們傳遞給父元件,父元件用v-on:jia,v-on:jian。$.emit()第乙個引數是自定義的事件的名稱,後面的引數都是要傳遞的資料。後邊的引數可以是沒有,可以是有多個。

在vue.js. 2.x中,推薦使用乙個空的vue例項來作為**事件匯流排,他就相當於乙個中介。有乙個元件把乙個資料傳遞給這個空的vue,然後誰需要(這裡的誰指的是另外乙個元件)這個資料,那麼就管空的vue要就好了。這兩個元件沒有任何聯絡。就好比租房者-中介-房東的關係。房東就相當於傳資料的元件,空的vue就相當於中介,需要資料的元件就相當於租房者。**示例如下: 按鈕

這種方法巧妙的實現了元件之間的通訊,包括父子、兄弟、跨級,如果深入的使用,可以給pub擴充套件例項,給他新增data、method、computed等選項,這些都可以是共有的。在具體業務中,可以將經常需要共享一些通用的資訊,比如使用者登陸的具體資訊。

。。。。除了這種方式,常見的方式還有父鏈子元件索引

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件,改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...