您好,登錄后才能下訂單哦!
這篇文章給大家介紹vue.js中怎么使用$refs和$emit 實現(xiàn)父子組件交互,內(nèi)容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
<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('我是父元素傳過來的') } } } </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 是子組件傳過來的值 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', '我是子元素傳過來的') } } } </script>
關(guān)于vue.js中怎么使用$refs和$emit 實現(xiàn)父子組件交互就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。