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

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