vue.js - 如何在 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

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

• 您可以通过 ref 直接访问子虚拟机，但这会变得很棘手，因为在子组件挂载之前不会填充 ref，并且 $refs 不是响应式(Reactive)的，这意味着你必须做一些像这样的骇人听闻的事情:

  <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 绑定(bind)传递给子组件。
• (高级)使用 portal-vue当您希望组件模板的片段存在于 DOM 的其他位置时使用插件。