vue.js $refs和$emit 父子組件交互的方法
更新時間:2017年12月20日 10:08:32 作者:axl234
本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了vue.js $refs和$emit 父子組件交互的方法,分享給大家,廢話不多說直接看代碼:
<strong>父調子 $refs (把父組件的數據傳給子組件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="parentCall" value="父調子" /> <hello ref="chil" />//hello組件 </div> </template> <script> import hello from './components/Hello' export default { name: 'app', 'components': { hello }, methods: { parentCall () { this.$refs.chil.chilFn('我是父元素傳過來的') } } } </script> /*Hello.vue :*/ <template> <div class="hello"></div> </template> <script> export default { name: 'hello', 'methods': { chilFn (msg) { alert(msg) } } } </script>
<strong>子調父 $emit (把子組件的數據傳給父組件)</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 是子組件傳過來的值 alert(evtValue) } } } </script> <!--Hello.vue :--> <template> <div class="hello"> <input type="button" name="" id="" @click="chilCall()" value="子調父" /> </div> </template> <script> export default { name: 'hello', 'methods': { chilCall(pars) { this.$emit('newNodeEvent', '我是子元素傳過來的') } } } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Ant Design Vue 添加區(qū)分中英文的長度校驗功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下功能,2020-01-01vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解,詳細的介紹了兩個的用法和區(qū)別,感興趣的可以了解一下2021-08-08cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue-virtual-scroll-list虛擬組件實現思路詳解
這篇文章主要給大家介紹了關于vue-virtual-scroll-list虛擬組件實現思路的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02vue2.0設置proxyTable使用axios進行跨域請求的方法
這篇文章主要介紹了vue2.0設置proxyTable使用axios進行跨域請求,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10