Vue下ref的基本使用---kalrry
一、简介
- 在js中是通过设置id，然后通过document.getelementbyid(hello) 来获取dom树进行操作。
- 在vue框架里面，是通过ref设置来获取参数的，这个东西有一个 好处，对于普通的元素比如button而言，他就是一个跟js一样的dom树获取，但是对于组件而言，就可以获取整个组件对象，我们可以通过这种方式获取组件里面的内容进行操作。
- ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例
- 首先ref的引用是相当于一个DOM节点（如果是子组件则指向的是其实例），而且是一个string类型的值。通俗的讲就类似于原生js用document.getElementById(“#id”)，只是类似，他们的不同点是Vue是操控虚拟DOM ，也就是说在渲染初期并没有这个ref的属性，这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。
ref的作用
5. 用来获取dom元素
6. 获取组件(中的data\方法)
二、ref获取dom元素
当vue需要操作dom元素时，可以使用vue提供的ref属性
- 在标签上添加一个ref属性，然后为这个属性起一个别名
- 通过this.$refs[‘别名’] 数组方式可以获取到这个元素
- 除了数组方式也可以使用对象方法this.$refs.属性名，不过建议使用数组方式
例子
<div id="app">
<p ref="pp">使用ref获取dom元素</p>
<button type="button" @click="getInfo">点击</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
methods:{
getInfo(){
alert("p标签中的内容是："+this.$refs['pp'].innerText)
}
}
})
</script>
三、ref获取组件
1、在组件上添加一个ref属性，并为这个组件起一个别名
2、通过this.$refs[‘别名’]可以获取到这个组件。当获取到组件后，你可以 得到组件中的属性 ，也可以 调用组件中的方法.
例子
<div id="app">
<child ref="child"></child>
<button type="button" @click="getInfo">获取组件中的属性</button>
<button type="button" @click="getFunction">调用组件中的方法</button>
</div>
<script type="text/javascript">
//定义组件
Vue.component('child',{
template:`
<div style="width:200px;height:200px;border:1px solid;">
<h2>组件</h2>
<p>{
{info}}</p>
<button type="button" @click="showInfo">组件内部的方法</button>
</div>
`,
data(){
return {
info:'使用ref获取组件'
}
},
methods:{
showInfo(){
alert(this.info)
}
}
})
new Vue({
el:'#app',
methods:{
getInfo(){
alert("组件中info属性的值是："+this.$refs['child'].info)
},
getFunction(){
this.$refs['child'].showInfo()
}
}
})
</script>
