在讲Vue组件中常见的三种传值方式前，我们需要先知道用它们的好处，这样我们才会更有动力去学它。
好处：对于一些复用性很高的功能，我们可以将它封装起来调用，在js中我们是用函数来封装的，而在Vue组件中，我们就可以用组件来封装它们，这样会让页面看起来更加整洁，所以我们需要学会给组件之间传值来灵活运用它们。
Vue中组件的常见的传值方式有以下几种：1.父组件向子组件传值；2.子组件向父组件传值；3.兄弟之间相互传值。下面我会通过一些简单的代码来分别介绍下这几种传值方式。
一. 父组件向子组件传值
父向子传值是我们最为常见的一种传值方式，也被称为“props传值”，顾名思义，是用props属性来传值的。
书写步骤：
- 写入常见的父组件结构vm，给父组件通过data写入内容；
- 通过Vue.component来创建子组件，设置自定义标签名，将自定义标签写入父组件中；
- 给父组件中的自定义标签添加自定义属性和属性值，在子组件通过props以数组的形式接收；
- 在子组件的template中通过字符串拼接的方法把父组件中设置的内容放进子组件中。
浏览器显示内容：
二. 子组件向父组件传值
子向父传值比父向子传值复杂一些，因为单向数据流(数据双方相互独立，只能由一个方向传递数据)的原因，不可以通过子元素直接修改父元素的内容，所以不能使用props，但是它在传递上用了$emit语法
书写步骤：
- 书写父组件vm和子组件son的结构，将它们的标签写入父组件中并且在父组件vm中设置用来接收数据的属性sonmsg；
- 在子组件data中设置子组件的数据，在子组件的template中加入按钮，并给它添加点击事件；
- 在子组件的methods中写入$emit执行函数，通过自定义的事件函数'my-event'，将子组件的数据传递给父组件中的自定义标签son，用@自定义的事件函数'my-event'将接收到的数据给自己的属性值，也就是handle1函数； 注意：methods中需要加this
- 在父组件的methods中设置handle1函数，将接收来的子组件数据赋值给父组件属性sonmsg。
通过点击按钮来触发事件，执行上述步骤
三. 兄弟组件之间相互传值
由于需要写两个组件，笔者只能截三个图，请连起来看 兄弟组件最大的特点，就是要定义一个事件中心，通过它的三个事件来让兄弟相互传值， 三个事件分别为：事件监听、事件触发、事件移除。
书写步骤：
- 创建父组件和兄弟组件的结构，把兄弟组件的自定义标签写入父组件中；
- 声明事件中心；
- 在兄弟组件的生命周期mounted这一步设置事件监听函数，监听自定义的事件，在data中设置自己的数据以及用来接收兄弟数据的属性，属性值为空；
- 在兄弟组件的template中设置按钮并添加点击事件，在methods中为这个点击事件添加事件触发，通过事件触发，事件监听会接收到数据，将数据赋值给用来接收兄弟数据的属性中，并通过字符串模板中的插值表达式在页面渲染出来
注意：之所有可以跨组件传递数据。是因为在事件中心中传递
点击组件A按钮所展示的页面：
点击组件B按钮所展示的页面：
希望笔者的一点个人见解能够帮助到您！
