【Vue面试题】ref是什么?

文章介绍了Vue.js中ref属性的使用,用于在父组件中注册对子组件或DOM元素的引用。$refs对象在组件挂载后可以访问到,对于DOM元素,引用指向实际的元素;而对于子组件,引用则指向组件实例。在mounted生命周期钩子中,可以通过this.$refs访问并操作这些引用。
摘要由CSDN通过智能技术生成

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

<template>
  <div>
    <!-- `vm.$refs.p` will be the DOM node -->
    <p ref="p" id="p_id">hello</p>

    <!-- `vm.$refs.child` will be the child component instance -->
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'test',
  components: {
    ChildComponent
  },
  mounted(){
    console.log(document.getElementById('p_id'));
    console.log(this.$refs.p);

    console.log(this.$refs.child);
  }
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值