客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
一、父组件向子组件传值1.父组件.vue
// 父组件中
<template>
<div>
<Child ref="child" :title="value"/>
</div>
</template>
<script>
export default {
data() {
return {
value: 'hello world!'
}
}
}
</script>
2.子组件.vue
// 父组件中
<template>
<div>
<span>{{title}}</span>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
}
}
}
</script>
//title值为'hello world! 二、兄弟组件间传值还可以通过中间件Bus
1.A组件.js
this.$bus.$emit("flag",true)
2.B组件.js
mounted() {
this.$bus.$off('flag')
this.$bus.$on('flag', data=> {
this.flag= data
})
}
三、子组件向父组件传值1.父组件.js
<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>
打印结果为 2.子组件.js
<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>
总结：组件间也可以通过传递方法从而解决。例如父组件为A，子组件有B和C。 父组件A调用子组件B的方法定义为aFun，把aFun传递给子组件C即可 这是在父组件中的组件C进行方法传递 <C :a-fun="aFun" /> 引用的则是在组件C，通过props
props: {
aFun: {
type: Function,
default: () => function() {}
}
}
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注极客世界的更多内容！ |
请发表评论