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直接访问子VM，但这会变得毛茸茸，因为在子组件已挂载之前不会填充ref，并且$refs不是被动的，这意味着你'我必须像这样做一些hacky：

<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插件。

Answer 2

子组件通过发出事件将数据传递回层次结构。

例如，在父级中，侦听事件并将子值添加到本地值（多个子元素的数组将是谨慎的），例如

<child @ready="childVal => { value.push(childVal) }"></child>

并在子组件中$emit创建/安装事件，例如

mounted () {
  this.$emit('ready', this.value)
}

演示〜https://jsfiddle.net/p2jojsrn/

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

2 个答案: