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

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

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

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

子組件傳值給父組件：

　　子組件：通過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子父組件通信的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

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