vue中ref的用法

更新日期: 2019-11-25阅读: 3.1k标签: 用法

一、ref有如下三种用法:

ref 加在普通的元素上,用 this.$refs.name 获取到的是dom元素; 

ref 加在子组件上,用 this.$refs.name 获取到的是子组件实例,父组件可以使用子组件的所有方法(在上篇博客已介绍); 

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


二、注意点

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

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


三、ref 的用法

1.加在普通元素上,获取dom元素

<input type="text" ref="inputRef"/>

mounted(){
  this.$refs.inputRef.focus();
}

//或者
created(){
	this.$nextTick(()=>{
	  this.$refs.inputRef.focus();
	})
},

2.v-for 和 ref,获取dom元素

(1)形式一:动态绑定ref

<div v-for="(item,index) in user" v-bind:key="index" v-bind:ref="'dom'+index" @click="getdom(index)">{{item.name}}</div>

data(){
  return {
	user:[
		{name:"小花",age:18},
		{name:"小黄",age:19},
		{name:"小蓝",age:20},
	]
 }
},

getdom(index){
	var r = "dom"+index;
	var s = this.$refs[r][0].innerhtml;
	console.log(s)
},

(2)形式二:ref使用固定值

<div v-for="(item,index) in user" v-bind:key="index" ref="dom" @click="getdom(index)">{{item.name}}</div>

data(){
  return {
	user:[
		{name:"小花",age:18},
		{name:"小黄",age:19},
		{name:"小蓝",age:20},
	]
 }
},

getdom(index){
	//此时this.$refs.dom是一个数组
	var s = this.$refs.dom[index].innerHTML;
	console.log(s)
},

链接: https://fly63.com/article/detial/6620

8种你可能正在写错的SQL用法

分页查询是最常用的场景之一,但也通常也是最容易出问题的地方。比如对于下面简单的语句,一般 DBA 想到的办法是在 type, name, create_time 字段上加组合索引。这样条件排序都能有效的利用到索引,性能迅速提升

在vue里使用codemirror的两种用法

这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能。代码显示这里用的是vue-codemirror插件。data中cmOptions的配置,这里我写的比较简单,具体的配置项,可以去查官方文档

你可能不知道的JSON.stringify用法

JS 中有许多常见的函数,我们可能每天都在使用它们,但是却不知道它们的一些额外功能。JSON.stringify 就是这样的一个函数,今天就来看下它的特殊用法。

vue中provide和inject 用法

provide和inject是成对出现的,用于父组件向子孙组件传递数据,provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

MutationObserver用法

Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。MutationObserver使用observe方法进行监听指定的元素节点变化

MutationObserver是什么?

MutationObserver概览MutationObserver interface可以用来监测DOM树的变化。MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。

JavaScript中document.write()用法

在JavaScript中document.write()函数可以向文档写入HTML表达式或JavaScript代码,用法“document.write(exp1,exp2,exp3,....)”,该函数可接受任何多个参数,并将其写入文档中。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!