ref的使用

vue 提供的一个操作dom的属性ref,用起来和ID类似,通过this.$ref来调用

  1. 常见的用法
<div ref="test" @click="test">ref 测试</div>

mounted(){
        console.log(this.$refs.test);
    },

在这里插入图片描述

  1. 当ref所在的dom元素是一个组建时
    子组建
<template>
  <div>组建</div>
</template>

<script>
export default {
  name:'refTest',
  data() {
    return{
      data:1
    }
  },
  methods: {
    _alert() {
      alert('test-ref')
    }
  }
}
</script>

引用子组建

<template>
  <div>
      <refTest ref="Test"></refTest>
  </div>
</template>

<script>
import refTest from '@/components/ref.vue'
export default {
    name:"test",
    components:{
        refTest
    },
    mounted(){
        console.log(this.$refs.Test);   //获取到的是一个vue组建对象,里面有各种属性,其中有一个属性是$el,这就是dom对象,和我们直接绑定在dom上获取的一样
        console.log(this.$refs.Test.$el);  //获取到dom对象
    },
}
</script>

<style>

</style>

获取到的是一个vue组建对象,里面有各种属性,其中有一个属性是$el,这就是dom对象,和我们直接绑定在dom上获取的一样
在这里插入图片描述
获取到dom对象
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45021462/article/details/114259386
ref