Vue - 如何将父引用作为道具传递给孩子? [英] Vue - How to pass parent ref to child as a prop?
问题描述
我正在尝试将当前组件的引用传递给这样的子组件:
<div class="screen" ref="screen"><子组件:screenRef="screenRef"></子组件></模板><脚本>常量父 = {name: '父母',数据: {屏幕引用:{}},安装(){this.screenRef = this.$refs['screen']}}
由于 Vue.js 类型不支持 HTMLDivElement，当我将 screenRef 定义为 prop 时，我在子组件中遇到错误.
const ChildComponent = {name: '孩子',道具: {屏幕: {类型:HTMLDivElement，默认: {}}}}有人可以告诉正确的方法吗?
只需尝试通过以下方式从子组件访问父组件:
this.$parent或
this.$el.parent或在子组件中使用 inheritAttrs 选项来不透明地将属性从父级传递到子级:
const ChildComponent = {继承属性:真，name: '孩子',道具: {屏幕: {类型:HTMLDivElement，默认: {}}}}I am trying to pass current component's ref to a child component like this:
<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>
Since Vue.js types don't support HTMLDivElement, I am getting an error in child component when I define screenRef as a prop.
const ChildComponent = {
name: 'child',
props: {
screen: {
type: HTMLDivElement,
default: {}
}
}
}
Could someone please tell the correct way to do this?
Just try to access parent from child component via:
this.$parent
or
this.$el.parent
or use inheritAttrs option in child component for nontransparent pass of attributes from parent to child:
const ChildComponent = {
inheritAttrs: true,
name: 'child',
props: {
screen: {
type: HTMLDivElement,
default: {}
}
}
}
这篇关于Vue - 如何将父引用作为道具传递给孩子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
