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

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

如果您需要来自其他组件的数据，只需将其与道具一起传递即可。

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

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

Answer 3

您所做的所有事情都是正确的。只是不要声明type道具所需的screen。以下props: {screen: {default: {}}}可以解决问题。

请注意，mounted钩子是将$refs元素分配给$data项的正确位置，因为前者未在created钩子中定义。 / p>

Answer 4

您也可以将default更改为null并删除类型。就我而言，我必须通过兄弟姐妹的裁判。

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

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

4 个答案: