父组件子组件传值

1、父组件向子组件传值

父组件向子组件传值的方法是通过v-bind绑定一个参数，其中msg是子组件要存放在props中的数据，FatherMsg是父组件data里的数据，login是子组件，在子组件身上定义一个props,他是一个数组，可以接受一个或者多个参数，例如下面这样：

<login v-bind:msg='FatherMsg'></login>

子组件：

props:[‘msg’,'msg1','msg2','msg3'] 

props中的数据是只读的，这里边存放的都是父组件中穿过来的。在调用时和普通调用一样，像下面这样：

<login>{{msg1}}-----{{msg2]}</login>

2、子组件向父组件传值

子组件向父组件传值是通过v-on来绑定一个函数，通过子组件来触发show方法，从而触发父组件身上的showFather方法，从而实现子组件向父组件传值。

show是子组件要触发的事件，showFather是父组件身上的方法，通过这个方法的参数，

<login @show='showFather'></login>

父组件身上的方法：

showFather(a,b){

    this.msg1=a

    this.msg2=b

}

子组件方法：

showSon(a,b){

    this.$emit('show',this.msg1.this.msg2)

}

3、父子组件传值

父组件通过v-bind绑定data上的数据，子组件通过在props上设置接收数据的参数接收父组件的值，然后在父组件上引用这个参数，将数据实现在页面上。

子组件传值到父组件利用了事件触发机制。通过v-on绑定一个事件，子组件利用点击事件，在事件内部通过$.emit触发上边绑定的事件，并且通过参数传子组件里data里的数据到父组件，父组件在自己的方法里实现将传来的数据绑定到自身data里的数据上。