Javascript 将值传递给父组件

子组件如何将其值传递给父组件？以下是我的子组件：

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:

{{table}}

单击时，调用

selectTable

，我想在其父组件中显示值吗？i、 e我需要将

tableSelected

属性传递给父组件。我怎样才能做到这一点呢？

您应该使用这种机制，特别是用于您想要归档的内容的机制

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

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

请看这把小提琴

我已将您的

selectTable

方法更改为发出自定义事件

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

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

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

{{selectedItem}}

如果您需要更多说明，请告诉我。

是解释孩子如何向倾听的家长发出事件的页面

是关于管理状态的页面

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

您的

表是一个状态项。如果需要，可以将状态更改向上传递，只要它们在存储中完成，而不是在组件或vue中完成。但您可以保持简单：将
tableSelected
作为存储中的属性，并直接在需要它的组件的
data
元素中声明它。如果您希望严格，请在存储上放置
changeTableSelected（）
方法

如果一个组件有多个实例，或者一个组件对它将出现的页面一无所知，那么您需要开始担心道具和事件。在此之前，我更愿意使用数据和存储。
可能的重复项我不理解
@项已更改的部分。子项发出
项已更改
事件。我们如何在父项中捕捉到这一点？
@item changed
是
v-on:item changed
的缩写形式。请查看此更新的小提琴，它使用
v-on
语法，并且在父项上使用方法，而不是直接更新值。有没有办法在不同的组件之间共享变量？如果没有父子关系怎么办？绝对可以在组件之间共享变量。子项可以通过此。$root。$data访问父项的所有数据，如果没有父子关系，则仍具有全局（窗口）范围。为2个不同的Vue实例提供相同的全局变量，它们将共享数据。看看我的答案。你需要理解为什么这可能是一个陷阱，但这并不意味着你不去做。
selectTable: function(table) {
  this.$emit('item-changed',table);
}

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

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