父子组件传值？

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组件也就随之更新了