Vue父与子之间的传值

父向子组件传参

TableList为父组件，ModelUpdate为子组件。Visible，record都是我们父组件传递给子组件的参数。在子组件我们只需要在 props 取到父组件传递来的参数就可以了，如下图

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

子组件向父组件传参

用法：vm.$emit( event, […args] )，触发当前实例上的事件。附加参数都会传给监听器回调。

父组件中给子组件绑定 v-on:onOk事件

<model-update  :Visible="Visible" :record="record" :callback="callback" v-on:onOk="submitForm"/>

methods:{

submitForm(record){

console.log(record);

}

}

子组件触发onOk 并给父组件传递一个this.record)对象

<Button  @click="submitForm"><Button />

methods: {

submitForm() {

this.$emit("onOk",{name:"传给父组件"});

} }

回调函数:利用父组件给子组件传递一个回调函数。

父组件中给子组件传递:onOk 函数

<model-update  :Visible="Visible" :record="record" :callback="callback" :onOk="submitForm" />

methods:{

submitForm(record){console.log(record);

}}

子组件

<Button @click="submitForm"><Button />

props:{

onOk: Function

}

methods:{

submitForm(){

this.onOk({name:"传给父组件"});

}

}