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里的数据上。