vue父子传值,兄弟传值,子父传值详解
时间：2022-04-11 10:46:01|栏目：vue|点击： 次
一、父组件向子组件传值
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
$emit 传值
$on 接收
$off 删除传输事件
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>
打印结果为 hello xuliting
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() {}
}
}
