父子组件传值？

Question

父组件father.vue:
<template>

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

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

Answer 1

<template>
  <div>
    <A :table-data="tableData"></A>
    <B @on-add="onAddTableData"></B>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
      };
    },
    methods: {
      onAddTableData(data) {
        this.tableData.push(data);
      },
    },
  };
</script>

大概是这样的流程，B组件添加表单后通过$emit('on-add', newData)通知父组件添加数据，A组件也就随之更新了

Answer 2

做到父子组件数据双向绑定 可以使用sync