'这个裁判$'在父组件

时间:2018-06-15 10:25:09

标签: javascript vue.js vuejs2 ref

我尝试执行ref的标准实现,以便我可以将子元素插入到InfoBox中。但无论我把它作为一个' ref'元素,永远不会成为我的InfoBox组件。结果始终是{} undefined来自日志调用。

点击处理程序用于测试计时问题,因为使用created vs mounted似乎是一个常见问题。

<InfoBox
  v-if="waitingForCode">
  <p ref="infoboxcontent">A 7-digit verification code has been sent.</p>
</InfoBox>

<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>

我开始认为我从根本上误解了&#39; ref&#39;属性,因为这似乎是一个微不足道的例子。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:3)

ref Vue特殊属性用于从当前组件模板引用DOM节点(或子组件)。

如果要将某些内容传递给自定义组件,这是<slot> Vue内置组件的用例。