本篇内容主要讲解“如何理解vue父子传值,兄弟传值,子父传值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解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>
打印结果为 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父子传值,兄弟传值,子父传值”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。