如何在VueJs中获取子组件的数据？

Question

这是一个简单的问题，但我不知道使用 Vue2 正确执行此操作的最佳方法：

父组件：

<template>
  <div class="parent">
    <child></child>
    {{value}} //How to get it
  </div>
</template>

子组件：

<template>
  <div class="child">
    <p>This {{value}} is 123</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return { value: 123 }
  }
}
</script>

Answer 1

实现这一目标的一些方法包括：

• 您可以通过引用直接访问子虚拟机，但这会变得很麻烦，因为在安装子组件之前引用不会被填充，并且$refs不是反应性的，这意味着您必须做一些像这样的黑客行为：

  <template>
    <div class="parent">
      <child ref="child"></child>
      <template v-if="mounted">{{ $refs.child.value }}</template>
    </div>
  </template>
  

  data() {
    return {
      mounted: false
    }
  },
  
  mounted() {
    this.mounted = true;
  }
  

• $emit子组件中的值，以便父组件可以在准备好或更改时获取该值。

• 使用Vuex（或类似原理）跨组件共享状态。
• 重新设计组件，以便您想要的数据由父组件拥有，并通过 prop 绑定传递给子组件。
• （高级）当您希望组件模板的片段存在于 DOM 中的其他位置时，请使用Portal-vue插件。