vue ref($refs)用法

通过ref和$refs可以方便的操作DOM元素

ref

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

$refs

$refs是一个对象,持有已注册过 ref的所有的子组件。
vue ref($refs)用法_第1张图片

ref 有三种用法:

1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

<div id="app">
 <div ref="englishAnalysis" class="usageChart"></div>
</div>
<script>
let app = new Vue({
 data: {
  },
created() {
  },
  mounted() {
  console.log(this.$refs.englishAnalysis);
  },
})
</script>

在这里插入图片描述

2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。

<div id="app">
 	<page-summary
      first-level-title="练习"
      second-level-title="展示展示展示"
      ref="outsideComponentRef"></page-summary>
</div>
<script>
import PageSummary from '../../components/PageSummary';
let app = new Vue({
 data: {
  },
  components: {
        PageSummary
    },
created() {
  },
  mounted() {
  console.log(this.$refs.outsideComponentRef);
  },
})
</script>

vue ref($refs)用法_第2张图片

3、利用 v-for 和 ref 获取一组数组或者dom 节点

<div id="app">
      <ul>
        <li v-for="(item,index) in itemList" :key="index" res='liItem'>{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
 data: {
    itemList: [1,2,3]
  },
created() {
  },
  mounted() {
  	console.log(vm.$refs.liItem);
  },
})
</script>

vue ref($refs)用法_第3张图片
说明:
1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。

ref是个变量的话要加:

<div id="app">
      <ul>
        <li v-for="(item,index) in itemList" :key="index" :res="'liItem'+index">{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
 data: {
    itemList: [1,2,3]
  },
created() {
  },
  mounted() {
  	console.log(vm.$refs.liItem0);
  },
})
</script>

vue ref($refs)用法_第4张图片

你可能感兴趣的:(vue)