vue子父組件通信的實(shí)現(xiàn)代碼

更新時(shí)間：2017年07月09日 17:27:44 作者：sunflower-zy

這篇文章主要介紹了vue子父組件通信的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

之前在用vue寫子父組件通信的時(shí)候，老是遇到問題！??！

子組件傳值給父組件：

　　子組件：通過emit方法給父組件傳值，這里的upparent是父組件要定義的方法　　　

　　模板：

<div v-on:click="switchViewBtn">切換視圖</div>

　　在data中定義：switchStatus = true;

　　方法：　　

switchViewBtn(){
　　　　　　let that=this;
　　　　　　this.$emit("parentView",that.switchStatus);
　　　　},

　　父組件：模板：　　　

<div @parentView="changeView" :msg="msg"></div>

　　方法：　

changeView(msg){
　　　　this.switchStatus = msg;
　　}

　　這樣就可以將子組件的值傳給父組件了。

父組件傳值給子組件：

　　父組件：模板：

　<div :name="name">切換視圖</div>

　　在data中賦值：

　export default {
　　　　　　data() {
　　　　　　　　return {
　　　　　　　　　　data：‘zy'
　　　　　　　　　}
　　　　　　}
　　　　}

子組件中接受代碼：

export default {
　　　　data() {
　　　　　　return {
　　　　　　　　data：‘zy'
　　　　　　　　}
　　　　　　}，
　　　　props:[
　　　　　　　'name'
　　　　]
　　}

以上所述是小編給大家介紹的vue子父組件通信的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue組件間通信六種方式（總結(jié)篇）
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了vue組件間通信六種方式,需要的朋友可以參考下
2019-05-05
使用vue-router切換組件時(shí)使組件不銷毀問題
這篇文章主要介紹了使用vue-router切換組件時(shí)使組件不銷毀問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的示例代碼
vue中監(jiān)控滾動(dòng)事件可以直接在mounted中綁定滾動(dòng)事件,然后在銷毀前解綁滾動(dòng)事件,本文通過實(shí)例代碼介紹vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的過程,感興趣的朋友跟隨小編一起看看吧
2023-10-10
淺析一下Vue3的響應(yīng)式原理
這篇文章主要通過示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下
2022-08-08
vue中使用vue-print.js實(shí)現(xiàn)多頁打印
這篇文章主要介紹了vue中使用vue-print.js實(shí)現(xiàn)多頁打印，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue 解決異步數(shù)據(jù)更新問題
今天小編就為大家分享一篇vue 解決異步數(shù)據(jù)更新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue.js 父子組件通訊開發(fā)實(shí)例
這篇文章主要介紹了Vue.js 父子組件通訊開發(fā)實(shí)例的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
vue如何實(shí)現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)observer和watcher源碼的相關(guān)資料，分析vue的observe實(shí)現(xiàn)源碼，聊聊如何一步一步實(shí)現(xiàn)$watch，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
計(jì)算屬性和偵聽器詳情
這篇文章主要介紹了計(jì)算屬性和偵聽器，文章以介紹計(jì)算屬性、偵聽器的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助
2021-11-11