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>
亮点解释：
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。
这些小技巧能让你的组件更灵活，下次我们再聊聊更高级的通信方式，比如兄弟组件之间如何通信。敬请期待！