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