转载自：https://blog.csdn.net/weixin_56818823/article/details/124309134
父子传参
父组件中的代码
<template>
<div>
<!-- :getname 是自定义的 -->
<son-1 :getname="name"></son-1>
</div>
</template>
<script>
import Son1 from '@/components/Son1.vue'
export default {
components: { Son1 },
data() {
return {
//父组件的值
name: '荷兰猪冯',
}
},
}
</script>
子组件通过props接收父组件的值
<template>
<div>
<div>{{ getname }}</div>
</div>
</template>
<script>
export default {
props: ['getname'],
}
</script>
子父传参
在子组件中的代码如下
<script>
export default {
data() {
return {
name: '我是一只荷兰猪',
}
},
methods: {
goTo() {
//通过$emit的进行传递
//toFather:自定义事件名称
//this.name 要传递给父组件的值
this.$emit('toFather', this.name)
},
},
mounted() {
this.goTo()
},
}
</script>
在父组件中接收方式如下
<template>
<div>
<div>子组件的值:{{ name }}</div>
<!-- @toFather:子定义的事件名称 getname:父定义的事件处理函数 -->
<son-1 @toFather="getname"></son-1>
</div>
</template>
<script>
import Son1 from '@/components/Son1.vue'
export default {
components: { Son1 },
data() {
return {
name: '',
}
},
methods: {
//处理事件函数,此时参数就是子组件传递的值
getname(e) {
this.name = e
},
},
}
</script>
当然还可以通过 this.$parent.父组件变量名称 最为简单粗暴的方式来完成子父传参,违背了官方的 单向数据流原则, 但好用
this.$parent.fatherName = this.name
兄弟组件传参的方式
我们可以通过 兄弟组件依赖共同的父元素 实现中转
son1通过.$emit的方法传递给父元素,然后父元素在传递给son2 ,最后son2通过父子传参的方式,用props接收参数,代码如下
<template>
<div>
<div>This is son1</div>
<div>son1的name:{{ name }}</div>
</div>
</template>
<script>
export default {
data() {
return {
name: '吃荷兰猪啊',
}
},
methods: {
toFather() {
this.$emit('gotoFather', this.name)
},
},
mounted() {
this.toFather()
},
}
</script>
然后父组件接收son1传递的参数,最后父组件再传递给son2,就是实现了兄弟组件的传参
<template>
<div>
<div>父亲获取儿子1的值{{ fatherName }}</div>
<!-- gotoFather:son1定义的事件 -->
<!-- getname:处理gotoFather的函数 -->
<son-1 @gotoFather="getname"></son-1>
<hr />
<hr />
<!-- :name给son2传递的方法名 -->
<!-- fatherName:传递的值 -->
<son-2 :name="fatherName"></son-2>
</div>
</template>
<script>
import Son1 from '@/components/Son1.vue'
import Son2 from '@/components/Son2.vue'
export default {
components: { Son1, Son2 },
data() {
return {
fatherName: '',
}
},
methods: {
getname(e) {
this.fatherName = e
console.log(e)
},
},
}
</script>
<style lang="scss" scoped></style>
还有一种就是通过事件总线的方式来进行传递
加入son3组件要传值给所有组件,以前父组件
事件总线- 实现任意关系的组件传参
通过 this.$root.$emit('bus', '事件总线:' + newValue)的方式来进行传递,第一个参数"bus"是自定义的事件名,第二参数是传递给事件的具体参数,.$emit:触发自定义事件
<template>
<div>
<button @click="num++">num:{{ num }}</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
}
},
watch: {
num(newValue, oldValue) {
this.$root.$emit('bus', '事件总线:' + newValue)
},
},
}
</script>
其他组件或者父组件接收方式如下
// $on: 当 参数1 名称的事件触发时, 触发参数2的函数
此外$off是关闭事件总线,不触发函数
<script>
export default {
data() {
return {
num: '',
}
},
mounted() {
this.$root.$on('bus', value => {
this.num = value
console.log(value)
})
},
}
</script>
