Vue子父组件间的传值

父传子值

1、子组件使用v-bind绑定父组件中的数据

<div :child="parent-data"></div>

2、在子组件中使用props创建自定义的接收数据属性

props['child']

3、就可以在子组件模版中使用数据了

子传父值

1、将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

msg(){
    this.$emit('target',data)
}

2、在父组件中先定义一个接受子组件数据的函数,data是子组件传递过来的参数

get-child(data){
    this.data = data
}

3、子组件中需要以某种方式例如点击事件的方法来触发传递参数的事件

<button @click="msg"></button>

4、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

<template @target="get-child"></template>  

子组件想要改变父组件中的数据，不能够直接跳过父组件去修改父组件中的数据，必须通过$emit把改变后的数据传递给父组件，让父组件自己修改。因此，我们说：组件之间数据独立