vue.js $refs和$emit 父子組件交互的方法
更新時(shí)間：2017年12月20日 10:08:32 作者：axl234
本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了vue.js $refs和$emit 父子組件交互的方法，分享給大家，廢話(huà)不多說(shuō)直接看代碼：
<strong>父調(diào)子 $refs （把父組件的數(shù)據(jù)傳給子組件） </strong><br><br><template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父調(diào)子" />
<hello ref="chil" />//hello組件
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentCall () {
this.$refs.chil.chilFn('我是父元素傳過(guò)來(lái)的')
}
}
}
</script>
/*Hello.vue :*/
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: 'hello',
'methods': {
chilFn (msg) {
alert(msg)
}
}
}
</script>
<strong>子調(diào)父 $emit (把子組件的數(shù)據(jù)傳給父組件)</strong>
//ps:App.vue 父組件
//Hello.vue 子組件
<!--App.vue :-->
<template>
<div id="app">
<hello @newNodeEvent="parentLisen" />
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子組件傳過(guò)來(lái)的值
alert(evtValue)
}
}
}
</script>
<!--Hello.vue :-->
<template>
<div class="hello">
<input type="button" name="" id="" @click="chilCall()" value="子調(diào)父" />
</div>
</template>
<script>
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素傳過(guò)來(lái)的')
}
}
}
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下功能，2020-01-01
vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細(xì)的介紹了兩個(gè)的用法和區(qū)別，感興趣的可以了解一下2021-08-08
cesium開(kāi)發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開(kāi)發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue項(xiàng)目中安裝使用axios全過(guò)程
這篇文章主要介紹了Vue項(xiàng)目中安裝使用axios全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue.js實(shí)現(xiàn)一個(gè)SPA登錄頁(yè)面的過(guò)程【推薦】
本篇文章主要介紹了Vue.js寫(xiě)一個(gè)SPA登錄頁(yè)面過(guò)程的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
這篇文章主要介紹了Vue-cli3多頁(yè)面配置詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請(qǐng)求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10