一、ref属性
ref 用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。
- 如果在普通的DOM元素上使用,引用信息就是DOM元素
- 如果用在子组件上,引用信息就是组件实例
- 想要在Vue中直接操作DOM元素,就必须用ref属性进行注册
- $ref不是响应式的,因此不要在此对象中试图去改变数据
- 当v-for去遍历元素或者组件时,引用信息则是一个数组
1.ref作用在组件上
html:
<div id="ref-outside-component" v-on:click="consoleRef">
<component-father ref="outsideComponentRef">
</component-father>
<p>ref在外面的组件上</p>
</div>
js:
var refoutsidecomponentTem={
template:"<div class='childComp'><h5>我是子组件</h5></div>"
};
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-component vue实例
// 通过$refs对象获取到此组件的引用
console.log(this.$refs.outsideComponentRef); // 输出: 此组件实例对象
}
}
});
2.ref作用在DOM元素上
html:
<!--ref在外面的元素上-->
<div id="ref-outside-dom" v-on:click="consoleRef" >
<p ref="outsideDomRef">ref在外面的元素上</p>