[英]'this.$refs' is always empty in parent component
I'm trying to do a standard implementation of ref
so that I can insert children elements into my InfoBox
. 我正在尝试进行ref
的标准实现,以便可以将子元素插入到InfoBox
。 But whatever I seem to put as a 'ref' element, never makes it to my InfoBox component. 但是,无论我将什么作为“ ref”元素,都永远不会将其添加到我的InfoBox组件中。 The result is always {} undefined
from the log calls. 结果总是{} undefined
在日志调用中{} undefined
。
The click handler is to test timing issues, as using created
vs mounted
seemed to be a common issue. 点击处理程序用于测试计时问题,因为使用created
和mounted
似乎是一个常见问题。
<InfoBox
v-if="waitingForCode">
<p ref="infoboxcontent">A 7-digit verification code has been sent.</p>
</InfoBox>
and 和
<template>
<div
class="info-box"
@click="clicked" >
{{ this.$refs.infoboxcontent }}
</div>
</template>
<script>
export default {
name: 'InfoBox',
mounted() {
console.log(this.$refs, this.$refs.infoboxcontent)
},
methods: {
clicked() {
console.log(this.$refs, this.$refs.infoboxcontent)
}
}
}
</script>
<style scoped>
// some style
</style>
I'm starting to think I fundamentally misunderstand the usage of the 'ref' attribute since this seems like a trivial example. 我开始认为我从根本上误解了'ref'属性的用法,因为这似乎是一个简单的例子。 Any help would be greatly appreciated. 任何帮助将不胜感激。
The ref
Vue special attribute is used to refer a DOM node (or a child component) from your current component template . ref
Vue特殊属性用于从当前组件模板引用DOM节点(或子组件)。
If you want to pass some content to a custom component, this is the use case for a <slot>
Vue built-in component. 如果要将某些内容传递给自定义组件,这是<slot>
Vue内置组件的用例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.