$ref的用法

this.$ref的用法

<div id="app">

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

<button @click="add">添加</button>

</div>

<script>

new Vue({

el: "#app",

methods:{

add:function(){

this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗

}

}

})

</script>

 

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

vue $ref的基本用法

一般用于dom操作

前言：

其实在没有学习前端框架之前使用dom操作非常的普遍，但是前端框架的一个好处就是避免使用dom底层操作，安全并且高效，但是有时候我们又不可避免的使用它，所以vue给dom操作留了一个后门，让我们在不得以的情况下使用它完成我们的功能！

内容：

在指定元素上，添加ref=“名称A”；

在获取的地方加入this.$refs.名称A:

1. 如果ref放在了原生dom元素上，获取的诗句就是原生的dom对象

2. 如果ref放在组件对象，获取的就是组件对象。

 

实例： 

app.vue template:

<template>

<div>

请输入内容

<input type="text" name="" v-model="text">

显示：{{text | myFilter }}

<!--子组件-->

<hello-world ref="sub"></hello-world>

<!--原生dom对象-->

<div ref="myDiv">heiehi</div>

</div></template>

app.vue script:

<script>

import HelloWorld from './components/HelloWorld.vue'; //引入子组件helloworld

export default {

components:{

helloWorld:HelloWorld

},

//该函数创建了组件，数据已经完成初始化，但是dom还未生成

create(){

console.log('created:', this.$refs.myDiv);

},

//数据装载到了dom上面，各种数据已经就位，将数据渲染到dom上，dom生成：mounted英文意思：装载，表示数据已经装载到dom上

mounted(){

console.log('mounted:', this.$refs.myDiv); //获取原生对象的dom

console.log(this.$refs.sub.$el); //获取组件对象的dom

this.$refs.myDiv.innerHTML="nihao"; //改变原生对象的dom元素值

this.$refs.sub.$el.innerHTML="我改变了子类"; //如果组件对象中只有一个div元素，这个操作是可以。

this.$refs.sub.$el.children[0].innerHtml="我改变了子类";//存在了多个div元素，通过这种方式获取，即使组件对象元素中使用ref，父组件没有办法获取到从而指定一个子组件的元素值，只能通过dom操作方式。

}

}

</script>