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