Vue-如何将父母裁判传递给孩子作为道具？

Question

我试图将当前组件的ref传递给子组件，如下所示：

<template>
    <div class="screen" ref="screen">
        <child-component :screenRef="screenRef">
        </child-component>
    </div>
</template>


<script>
    const Parent = {
        name: 'parent',
        data: {
            screenRef: {}
        },
        mounted() {
            this.screenRef = this.$refs['screen']
        }
    }
</script>

由于Vue.js类型不支持HTMLDivElement，当我定义screenRef为道具时，我在子组件中遇到了错误。

const ChildComponent = {
  name: 'child',
  props: {
    screen: {
      type: HTMLDivElement,
      default: {}
    }
  }
}

有人可以告诉正确的方法吗？

Answer 1

只需尝试通过以下方式从子组件访问父组件：

this.$parent

或者

this.$el.parent

或者在子组件中使用inheritAttrs选项来实现从父级到子级的非透明属性传递：

const ChildComponent = {
  inheritAttrs: true,
  name: 'child',
  props: {
    screen: {
      type: HTMLDivElement,
      default: {}
    }
  }
}

Answer 2

你做的所有事情都是正确的。只是不要在子组件中声明 proptype的必需内容。screen下面的方法props: {screen: {default: {}}}就可以解决这个问题。

作为旁注：

• 挂钩是将元素分配给项目的正确位置mounted，因为前者未在挂钩处定义。$refs$datacreated

• 如果 你想应用 props 类型验证，Vuetype: Object仍然可以很好地用于你的props 类型验证。screen

• 如果您偶然想要分配除default空之外的对象值，{}则必须通过函数分配它（与非对象数据类型不同）：

  default: function () {
      return {a: 1, b: 2}
  }
  

Answer 3

如果您需要来自不同组件的数据，只需使用 props 传递它即可。

或者，如果您在多个组件中需要此数据，请尝试 Vuex：

https://vuex.vuejs.org/guide/