在vue中，最基本的组件之间的传值，分为三种：1.父传子 2.子传父 3.兄弟相传

那么这三种方式如何传值呢？

下面我们来看看

一、父传子接

概述：父传子，就是父组件向子组件传数据。父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

步骤：

1.父传：在父组件中的data中定义好数据，引入子组件（记得要在components中注册组件）。通过自定义属性，将数据绑定，方便接下来传给子组件。见图1.1。

图1.1 父组件页面

2.子接：在子组件之中接收父组件刚刚通过自定义属性传过来的值，见图1.2。

图1.2 子组件页面

3.效果：

图1.3 父传子效果图

二、子传父接

概述：子传父的实现方式就是在子组件中用了 this.$emit 来自定义一个事件，把data中的数据作为参数。在父组件中通过刚刚自定义的事件，写个函数，这个函数的形参就是子组件中data中的数据。

步骤：

1.子传：设置一个点击按钮，点击按钮后向把数据传给父组件。

            触发点击事件时，通过$emit自定义事件，带上参数传递。

图2.1 子组件页面

2.父接：

通过刚刚自定义的事件，绑定一个函数，通过函数形参接收子组件传过来的值。最后赋值给data，就可以渲染出来了。

图2.2  父组件页面

3.效果:

2.3 子传父效果图

三、兄弟组件之间传参

概念：兄弟组件传值，可以通过一个共用的vue实例，在组件中导入这个vue实例（导入时取名myvue）。把brother1中的数据通过$emit添加到myvue中。brother2通过myvue中的$on接收中传过来的值。

步骤如下：

目的:把组件1中的数据传给组件2

1.创建一个共用的vue实例

图3.1 共用实例

2.在组件1中引入共用的vue实例。在data中定义要传递的数据，然后通过$emit，添加到vue的实例中 。

图3.2 兄弟组件1

3.在组件2中中引入共用的vue实例。通过$on接收vue实例中的参数。

注意：在这里接收参数时的函数要使用箭头函数，因为箭头函数的指向外部，这样才能渲染出来。

图3.3 兄弟组件2

4.把两个兄弟组件都引入父组件中（记得要在components中注册组件）

图3.4 父组件

5.效果：

图3.5 兄弟组件相传效果图

总结：

1.父传子（通过自定义属性来传）

    父传：<father :ftos="msg"/>

    子接：props:['ftos']

2.子传父（通过事件来传）

    子传：this.$emit('stof',this.msg)

    父接：<sontofather @stof="getsonvalue"/>

        methods:{

            getsonvalue(value){

            }

        }

3.兄弟相传（通过共用的vue实例来传）

        组件1传：$emit

        组件2接：$on