2：Vue.js 父子组件通信：让你的组件“说话”

上一篇我们聊了如何用 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>

亮点解释：

1. props 传值：MyButton 用 label 和 type 控制按钮显示的内容和样式。
2. 事件绑定：父组件用 @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}`);},
},

亮点解释：

1. $emit 的作用：子组件通过 $emit 触发事件，把数据传给父组件。
2. 事件监听：父组件监听 button-clicked 事件，就能知道哪个按钮被点了。

---

小结

父子组件通信很简单：

        父传子用 props。

        子传父用 $emit。

这些小技巧能让你的组件更灵活，下次我们再聊聊更高级的通信方式，比如兄弟组件之间如何通信。敬请期待！