父组件向子组件通信与子组件向父组件通信问题总结

子组件向父组件传值

• 子组件

this.$emit('updateData', this.updateFlag) // 将this.updateFlag传给父组件

• 父组件

<child @updateData="parentFunc" /> // 通过在在子组件上绑定同名updateData方法接收子组件传来的值(必须同名)

components: {
    child
}
parentFunc(val){ // val的值就是子组件传来的值
    console.log(val)
}

父组件向子组件传值

• 父组件

<child :sendData="parentData" /> // 绑定参数用于子组件接收值，parentData是父组件中的值

• 子组件

props: { // 子组件通过props接收父组件的传值
    sendData: {
        type: String..., // 接收的参数类型,String、Boolean等
        default: '' // 默认值
    }
}
子组件中的方法就可以使用sendData了