前端開發 Vue父子元件的通訊及訪問

2022-06-26 05:09:15 字數 1350 閱讀 5545

props傳陣列

props:['cmovies','cmessage']
props傳物件
props:

cmovies:

}//當型別為陣列時,default 返回的也是陣列

cinfo:

}}//當型別為物件時,返回的也是物件{}

}

vue例項

用v-bind來繫結子元件和父元件中的資料,呼叫的時候用子元件的

模板cpn

}

cpn元件

const cpn = }}

為子元件設定兩個props(屬性),在使用時可以用v-bind繫結資料

new vue

var vm = new vue(,

methods: {},

components:

});

為什麼不用cinfo而用cinfo

v-bind不支援駝峰

childmymessage要寫成child-my-message

當子傳父時,就需要自定義事件了

v-on來監聽dom事件,也可用於元件之間的自定義事件

流程在子元件中,通過 $emit() 來觸發事件,在父元件中,用v-on來監聽事件

//父元件

//子元件

}

//cpn子元件

const cpn = ,,,

]}},methods:},}

//new vue

var vm = new vue(,

methods:

},components:

});

cpn: 

},methods: }}

}

如何在父元件中呼叫showmessage()?

button

var vm = new vue(,

methods: }}

預設是個空的物件

乙個類似id的標識

使用:

methods: 

},

不常

Vue父子元件及非父子元件如何通訊

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 子元件通過props來接收資料 方式1 方式2 方式3 這樣呢,就實現了父元件向子元件傳遞資料.那麼,如果子元件想要改變資料呢?這在vue中是不允許的,因為vue只允許單向資料傳遞,這時候我們可以通過觸發事件來通知父元件改變資料,從...

vue2 0父子元件及非父子元件通訊

1.父元件傳遞資料給子元件 父元件資料可以通過props屬性來傳給子元件 父元件 parent msg 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 2.子元件與父元件通訊 如果子元件想要改變資料呢?這...

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...