Question

子组件如何将其值传递给父组件？这是我的孩子组成部分：

使用Javascript：

new Vue({
  el: '#table-list',
  data: {
    tableList: ['Empty!'],
    tableSelected: ""
  },
  methods: {
    getTableList() {
      axios
        .get('/tables')
        .then(tableList => {
          this.tableList = tableList.data;
        })
        .catch(e => console.warn('Failed to fetch table list'));
    },
    selectTable(table) {
      this.tableSelected = table;
    }
  },
  mounted() {
    this.getTableList();
  }
});

HTML：

<div id="table-list">
    <p v-for="table in tableList">
        <i class="fa fa-table" aria-hidden="true"></i>&nbsp;
        <span class="text-primary" v-on:click="selectTable(table)"> {{ table }} </span>
    </p>
</div>

点击后，selectTable被调用，我想在其父组件中显示值？即我需要将tableSelected属性传递给父组件。我怎么能这样做？

Answer 1

您应该使用vue components，特别是events机制来存档。

道具用于将数据从父组件传递到子组件，以及将事件从子组件传递到父组件的事件。

我们已经了解到父母可以使用道具将数据传递给孩子，但是当事情发生时我们如何与父母沟通？这就是Vue的自定义事件系统的用武之地。

请看这个小提琴https://jsfiddle.net/AldoRomo88/sLo1zx5b/

我更改了您的selectTable方法以发出自定义事件

selectTable: function(table) {
  this.$emit('item-changed',table);
}

在您的父组件中，您只需要监听该事件

<div>
{{selectedItem}}
</div>

<table-list @item-changed="newValue => selectedItem = newValue " ></table-list>

如果您需要更多说明，请与我们联系。

Answer 2

Here是解释儿童如何向听父母发送事件的页面。

Here是关于管理州的页面。

用VUE记住你的目标是MVVM。您希望商店中的所有状态，其中每个状态项都存储一次，无论它被引用了多少次，以及可以更新多少种方式。

您的tableSelected是州项目。如果需要，您可以将状态更改传递到链中，只要它们在商店中完成，而不是在组件或vue中完成。但您可以保持简单：在商店中创建tableSelected属性，并直接在需要它的组件的data元素中声明它。如果您想要严格，请在商店上添加changeTableSelected()方法。

如果一个组件有多个实例，或者一个组件对它将出现的页面一无所知，你需要开始担心道具和事件。在此之前，我更愿意使用数据和商店。

将值传递给父组件

2 个答案: