父子组件传值?

依依雨柔
  • 233

父组件father.vue:
<template>

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

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

回复
阅读 1k
2 个回答
asseek
  • 9.4k
✓ 已被采纳
<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组件也就随之更新了

李昊天
  • 1.8k

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏