网站快速查找百度知道在线
上一篇我们聊了如何用 Vue.js 创建一个简单的组件，这次咱们再往前走一步，讲讲 Vue.js 的父子组件通信。组件开发里，最重要的就是让组件之间能够“说话”，数据能流通起来。废话不多说，直接开干！
父组件传数据给子组件
1. 父组件用 props 给子组件传值
在上一篇的按钮组件基础上，我们稍微改进下。假设我们有一个表单组件 MyForm.vue，里面有两个按钮，一个提交，一个重置：
父组件代码
<template><div><h3>请填写表单</h3><input type="text" placeholder="输入内容" v-model="inputValue" /><MyButton :label="'提交'" :type="'primary'" @click="handleSubmit" /><MyButton :label="'重置'" :type="'secondary'" @click="handleReset" /></div>
</template><script>
import MyButton from './MyButton.vue';export default {components: {MyButton,},data() {return {inputValue: '',};},methods: {handleSubmit() {alert(`提交内容：${this.inputValue}`);},handleReset() {this.inputValue = '';},},
};
</script>
亮点解释：
props传值：MyButton用label和type控制按钮显示的内容和样式。- 事件绑定：父组件用
@click把点击事件传给子组件，子组件不需要关心逻辑。
子组件怎么传消息给父组件？
在复杂场景里，子组件也需要把自己的“想法”告诉父组件，比如一个复选框列表，用户选择了某些选项，我们得把这些选项告诉父组件。
2. 子组件用 emit 通知父组件
我们来改造下按钮组件，让它在点击时通知父组件“我被点了！”。
子组件代码
<template><button :class="buttonClass" @click="notifyParent">{{ label }}</button>
</template><script>
export default {props: ['label', 'type'],methods: {notifyParent() {this.$emit('button-clicked', this.label);},},
};
</script>
父组件代码
<MyButton label="提交" @button-clicked="handleChildClick" />
<MyButton label="取消" @button-clicked="handleChildClick" />
父组件里的方法：
methods: {handleChildClick(label) {alert(`你点击了按钮：${label}`);},
},
亮点解释：
$emit的作用：子组件通过$emit触发事件，把数据传给父组件。- 事件监听：父组件监听
button-clicked事件，就能知道哪个按钮被点了。
小结
父子组件通信很简单：
父传子用 props。
子传父用 $emit。
这些小技巧能让你的组件更灵活，下次我们再聊聊更高级的通信方式，比如兄弟组件之间如何通信。敬请期待！