一、Vue特殊特性
Vue的特殊属性主要有:key、ref、is、slot,ref是Vue特殊属性之一
ref
:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs
对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取
二、ref使用
1. 在需要获取的元素上添加ref属性
例如: <p ref="myP">我是段落</p>
2. 在使用的地方通过 this.$refs.xxx
获取
例如 this.$ref.myP
refs
: 一个对象,持有注册过 ref
特性 的所有 DOM 元素和组件实例
注意:refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
结语
三、ref特点
在讲ref特点之前我们先来回顾, 原生语法获取元素的特点
1. 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
例如: 通过原生的语法document.querySelector
获取到的都是被渲染之后DOM元素, 也就是原生的元素
imageVUE官方并不推荐我们这样获取
<div id="app">
<button @click="myFn">我是按钮</button>
<p>我是原生的DOM</p>
<one></one>
</div>
<template id="one">
<div>
<p>我是组件</p>
</div>
</template>
<script>
Vue.component('one', {
template: '#one'
});
new Vue({
el: '#app',
methods: {
myFn() {
console.log(document.querySelector('p'));
console.log(document.querySelector('#myOne'));
}
}
});
</script>
在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
2. ref添加到原生DOM上, 拿到的就是原生DOM
image<div id="app">
<button @click="myFn">我是按钮</button>
<p ref="myP">我是原生的DOM</p>
</div>
<script>
new Vue({
el: '#app',
methods: {
console.log(this.$refs); // 这里的$refs是一个对象
console.log(this.$refs.myP);
}
}
});
</script>
3. ref添加到组件上, 拿到的就是组件
拿到了组件后, 还可以访问组件中的数据
image<div id="app">
<button @click="myFn">我是按钮</button>
<one ref="myOne"></one>
</div>
<template id="one">
<div>
<p>我是组件</p>
</div>
</template>
<script>
Vue.component('one', {
template: '#one',
data: function () {
return {
msg: 'Vue-特殊属性-ref'
}
},
methods: {
say(){
console.log('say');
}
}
});
new Vue({
el: '#app',
methods: {
myFn() {
console.log(this.$refs);
console.log(this.$refs.myOne);
console.log(this.$refs.myOne.msg);
console.log(this.$refs.myOne.say);
}
}
});
</script>
网友评论