Vue中的v-el与v-ref
v-el作用： 通过v-el我们可以获取到DOM对象。v-ref作用： 通过v-ref获取到整个组件（component）的对象。示例源码<!DOCTYPE html><html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml"><
·
v-el
- 作用：
通过v-el我们可以获取到DOM对象。
v-ref
- 作用：
通过v-ref获取到整个组件（component）的对象。
示例
源码
<!DOCTYPE html>
<html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="demo">
<h2>组件对象</h2>
</template>
<div id="app">
<h2 v-el:myh2>DOM对象</h2>
<button @click="getDom">获取DOM对象</button>
<hr>
<demo v-ref:mycom></demo>
<button @click="getCom">获取组件对象</button>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//创建Vue对象
new Vue({
el:'#app'
,methods:{
getDom(){
console.log(this.$els.myh2);
}
,getCom(){
console.log(this.$refs.mycom);
}
}
,components:{
'demo':{
template:'#demo'
}
}
});
</script>
</body>
</html>
结果
分析
上面的代码实现的功能是，通过点击获取DOM对象按钮，其会在控制台中打印出其获取的DOM对象信息；而当我们点击第二个获取组件对象按钮时，其会在控制台中打印出整个控件的信息。
第一个方法中，其DOM对象是通过v-el将当前的h2的DOM对象绑定到this.$els中，其中myh2即为当前DOM对象的名称，这里注意的是，这里是区分大小写的，假如说我们在控件中用v-el:myH2定义，则在调用的时候，仍然使用this.$els.myh2，否则会出现undefined信息。
第二个方法中，其组件对象通过v-ref将当前组件绑定到this.$refs中，在这里一样得注意大小写问题，如果我们将组件的名称定义为v-ref:myCom，则组件的调用仍然是this.$refs.mycom
而对于上面的这种大小写情况，与其说是不很人性化，倒不如说是个bug更为恰当。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)