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)代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
您可能感興趣的文章:
- vue父組件向子組件動態(tài)傳值的兩種方法
- vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
- 詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli）
- vue中用動態(tài)組件實現(xiàn)選項卡切換效果
- vue動態(tài)組件實現(xiàn)選項卡切換效果
- vuejs動態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
- Vuejs第十二篇之動態(tài)組件全面解析
- Vue.js動態(tài)組件解析
- 詳解vue表單驗證組件 v-verify-plugin
- vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼
相關(guān)文章
我們在做vue項目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法
這篇文章主要介紹了vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue 實現(xiàn)無規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細講解在Vue3中如何實現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07
vue?調(diào)用瀏覽器攝像頭實現(xiàn)及原理解析
這篇文章主要為大家介紹了vue調(diào)用瀏覽器攝像頭實現(xiàn)及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue resource發(fā)送請求的幾種方式，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
通過jsconfig.json文件定義一個JavaScript項目,目錄中是否存在此類文件表示該目錄是JavaScript項目的根目錄,文件本身可以選擇列出屬于項目的文件,要從項目中排除的文件以及編譯器選項,這篇文章主要介紹了vscode jsconfig.json 使用說明,需要的朋友可以參考下2023-09-09
vue中集成省市區(qū)街四級地址組件的實現(xiàn)過程
我們在開發(fā)中常會遇到選擇地址的需求,有時候只需要選擇省就可以,有時候則需要選擇到市、縣,以至于鄉(xiāng)鎮(zhèn)，甚至哪個村都有可能,下面這篇文章主要給大家介紹了關(guān)于vue中集成省市區(qū)街四級地址組件的相關(guān)資料,需要的朋友可以參考下2022-12-12