父子组件传值？

Question

父组件father.vue:
<template>

<div>
    <A></A>
    <B></B></div>

</template>
其中A组件为table组件，table中的数据由father组件传入。
B为添加Form表单数据的组件，想实现通过B组件增加数据到A组件的table中，该如何写vue代码？

Answer 1

<template> &nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;<A&nbsp;:table-data="tableData"></A> &nbsp;&nbsp;&nbsp;&nbsp;<B&nbsp;@on-add="onAddTableData"></B> &nbsp;&nbsp;</div></template><script> &nbsp;&nbsp;export&nbsp;default&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;data()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableData:&nbsp;[], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onAddTableData(data)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.tableData.push(data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;};</script>大概是这样的流程，B组件添加表单后通过$emit('on-add', newData)通知父组件添加数据，A组件也就随之更新了