Vue组件之间传值

Vue.js

父组件向子组件传值

若父组件中的值value1:'这是父组件中的值',要向子组件test传值。则在父组件中<test v-bind:parentValue="value1"></test>上绑定自定义属性名(parentValue)的值为value1;子组件中data下定义props的值为父组件里自定义的属性名(parentValue),即:props:['parentValue'],然后在子组件中就可以通过parentValue传递父组件的值了。

子组件向父组件传递数据

子组件主要通过事件传递数据给父组件,先在子组件中demo绑定事件(test),在methods中通过:

1
2
3
test:function(){
this.$emit('父组件中绑定的接收方法parentMethod',this.要传递的数据)
}

在父组件中通过<demo v-on:parentMethod="自定义获取数据的方法getValue"></demo>,在父组件中methods里实现方法getValue(val){ this.value=val},其中里面的val是形参,再data中return接收到的数据value:' ',这时候就可以在父组件中使用value来传递子组件中的数据了。