javascript - Vue-如何将 parent 裁判传递给 child 作为 Prop ？

我试图将当前组件的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定义为prop时，我在子组件中遇到了错误。

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

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

最佳答案

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

this.$parent

要么

this.$el.parent

或在子组件中使用InheritAttrs 选项，将属性从父级不透明地传递给子级:

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