在上一篇文章《前端开发笔记 | React Hooks子组件和父组件交互》里面我介绍了在使用React Hooks的开发方式下,子组件和父组件的交互,那现在就来介绍下Vue 3中的子组件和父组件的交互。
父组件调用子组件
子组件定义文件SubItem.vue
<script>
export default {
props: {
btnText: String
}
}
</script>
<template>
<div>
<button v-text="btnText" @click="$emit('changeBtnText')" />
</div>
</template>
父组件调用子组件父组件调用子组件
<script>
import SubItem from '../components/SubItem.vue'
export default {
components: { SubItem },
data() {
return {
btnText: '测试'
}
},
methods: {
changeBtnText() {
this.btnText = '改变按钮文案'
}
}
}
</script>
<template>
<div>
<sub-item :btnText="btnText" @change-btn-text="changeBtnText" />
</div>
</template>
这就是简单的在父组件中调用子组件,由父组件控制子组件的按钮的展示和点击事件。
子组件改变父组件
父组件定义
<script>
import SubItem from '../components/SubItem.vue'
export default {
components: { SubItem },
data() {
return {
btnText: '测试'
}
},
methods: {
changeBtnText(value) {
this.btnText = value
}
}
}
</script>
<template>
<div>
<button id="main-btn" v-text="btnText" />
<sub-item @change-btn-text="changeBtnText" />
</div>
</template>
子组件文件SubItem.vue中刷新父组件按钮文案
<script>
export default {
methods: {
onClick() {
console.log('改变父组件按钮')
this.$emit('changeBtnText', '改变按钮文案')
}
}
}
</script>
<template>
<div>
<button @click="onClick">改变父组件按钮</button>
</div>
</template>
实际效果:点击子组件中“改变父组件按钮”,父组件中的按钮#main-btn的文案从“测试”变成了“改变按钮文案“,同时在Console中输出”改变父组件按钮“。
这就是使用Vue 3开发下,子组件和父组件的交互,Vue 3.0开发代码很简洁,目前在国内也非常流行。