您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“如何理解vue父子傳值,兄弟傳值,子父傳值”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何理解vue父子傳值,兄弟傳值,子父傳值”吧!
// 父組件中 <template> <div> <Child ref="child" :title="value"/> </div> </template> <script> export default { data() { return { value: 'hello world!' } } } </script>
// 父組件中 <template> <div> <span>{{title}}</span> </div> </template> <script> export default { props: { title: { type: String, default: '' } } } </script>
//title值為'hello world!
$emit
傳值
$on
接收
$off
刪除傳輸事件
this.$bus.$emit("flag",true)
mounted() { this.$bus.$off('flag') this.$bus.$on('flag', data=> { this.flag= data }) }
<template> <div> <Child ref="child" @getTitle="getTitle"/> </div> </template> <script> import Child from './components/Child' export default { components: { Child }, data() { return { } }, method:{ getTitle(data){ console.log(data) } } } </script>
打印結(jié)果為 hello xuliting
<template> <div> <span>{{title}}</span> </div> </template> <script> export default { data() { return { title: 'hello xuliting' } }, mounted(){ this.getFun() }, method:{ getFun(){ this.$emit("getTiltle",this.title) } } } </script>
到此,相信大家對“如何理解vue父子傳值,兄弟傳值,子父傳值”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。