Vue 父子元件通訊入門

2022-06-30 03:36:14 字數 716 閱讀 5692

1.元件例項定義方式,注意:子元件一定要使用props屬性來定義父元件傳遞過來的資料

2.使用v-bind或簡化指令,將資料傳遞到子元件中

原理:父元件將方法的引用,傳遞到子元件內部,子元件在內部呼叫父元件傳遞過來的方法,同時把要傳送給父元件的資料,在呼叫方法的時候當作引數傳遞進去;

子元件內部通過this.$emit('方法名', 要傳遞的資料)

方式,來呼叫父元件中的方法,同時把資料傳遞給父元件使用;

子元件中的data資料,不是通過父元件傳遞的是子元件私有的,是可讀可寫的;

子元件中的所有 props中的資料,都是通過父元件傳遞給子元件的,是唯讀的;

computed

屬性的結果會被快取,除非依賴的響應式屬性變化才會重新計算;主要當作屬性來使用;

methods方法表示乙個具體的操作,主要書寫業務邏輯;

watch乙個物件,鍵是需要觀察的表示式,值是對應**函式。主要用來監聽某些特定資料的變化,從而進行某些具體的業務邏輯操作;可以看作是computedmethods的結合體;

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名,html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件,父元件利用v on對事件進行監聽,實現引數的傳遞...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容,需要引入props,也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數,則某個部分要和引數post對應,即 v bind post post...