Vue父子组件间通信
父子组件通信
父传子 (props)
(1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性绑定了父组件中的数据
(2)然后在子组件中用props接收自定义的属性
(3)子组件使用父组件数据
//(1)父组件中:
<Son :fatherName="name" :fatherAge="age"/>
//(2)子组件中:
props: ['fatherName','fatherAge']
//(3)子组件中:
<h3>我的父亲是{{fatherName}} 组件</h3>
<h3>我的父亲今年{{fatherAge}} 岁了</h3>
子传父 (自定义事件)
(1)在父组件中给子组件绑定自定义事件,<Son @xxx="func"/>
func是自定义事件被触发后,执行的回调(即自定义事件被触发后,父组件该做些什么)
(2)如何触发自定义事件:子组件做了某些事情后,告诉父组件,我触发了自定义事件,并捎带一些数据
(3)父组件使用子组件数据
//(1)父组件中:
<Son @getFromSon="showSon"/>
showSon(name,age) {
console.log(`My son's name is ${name}, he is ${age} now!`);
this.sonName = name
this.sonAge = age
}
//(2)子组件中:
<button @click="sendToFather">点我传信息给父亲</button>
sendToFather() {
this.$emit('getFromSon',this.name,this.age)
}
//(3)父组件中:
<h3>我的儿子是{{sonName ? sonName : '不知道'}}</h3>
<h3>我的儿子今年{{sonAge ? sonAge : '不知道多少'}} 岁了</h3>
完整代码
Father.vue:
<template>
<div>
<h3>我是{{name}} 组件</h3>
<h3>我今年{{age}} 岁了</h3>
<h3>我的儿子是{{sonName ? sonName : '不知道'}}</h3>
<h3>我的儿子今年{{sonAge ? sonAge : '不知道多少'}} 岁了</h3>
<br><br>
<Son :fatherName="name" :fatherAge="age" @getFromSon="showSon"/>
</div>
</template>
<script>
import Son from '@/components/Son.vue'
export default {
name: 'Father',
data() {
return {
name: 'AAA',
age: 32,
sonName: '',
sonAge: 0
}
},
components: { Son },
methods: {
showSon(name,age) {
console.log(`My son's name is ${name}, he is ${age} now!`);
this.sonName = name
this.sonAge = age
}
}
}
</script>
<style>
</style>
Son.vue:
<template>
<div>
<h3>我是{{name}} 组件</h3>
<h3>我今年{{age}} 岁了</h3>
<h3>我的父亲是{{fatherName}} 组件</h3>
<h3>我的父亲今年{{fatherAge}} 岁了</h3>
<button @click="sendToFather">点我传信息给父亲</button>
</div>
</template>
<script>
export default {
name: 'Son',
data() {
return {
name: 'aaa',
age: 6
}
},
props: ['fatherName','fatherAge'],
methods: {
sendToFather() {
this.$emit('getFromSon',this.name,this.age)
}
}
}
</script>
<style>
</style>