Vue中ref属性获取DOM元素和组件引用
2020-05-27 本文已影响0人
Jure_joe
-
ref获取DOM元素
vue中获取DOM元素不建议用js直接操作DOM，使用ref可达到操作DOM的效果
写法：this.$refs.pr.innerText：其中pr指代ref的值，innerText为获取元素中的文本内容，如下：
<div id="app">
<!-- 获取DOM元素 ,ref是英文单词reference的缩写-->
<p id="p" ref="pr" @click="getElement">我家里有矿</p>
</div>
const vm = new Vue({
el:'#app',
data:{
},
methods:{
getElement() {
//这种直接操作dom的方法获取元素,在vue是不提倡这样做的,当然你这样做了没人拦
console.log(document.getElementById("p").innerText)
//vue中提倡使用的方法
console.log(this.$refs.pr.innerText)
}
},
components:{
com
}
})
-
ref实现组件引用
在组件中使用该属性，可直接获取组件的私有方法和私有属性，
获取私有属性写法：this.$refs.com.msg,其中com指代ref的值，msg为组件中的私有属性
获取私有方法的写法：this.$refs.com.action(),其中com同上，action()代表私有方法，这里的括号不能去掉，去掉的话输出的内容为方法的引用
<div id="app">
<!-- 通过ref进行组件引用 -->
<com ref="com"></com>
</div>
<template id="tem">
<div>
<button @click="action">我就是一个子组件</button>
</div>
</template>
const com = {
template:"#tem",
data:function() {
return {
msg:'我是组件里的属性值'
}
},
methods:{
action(){
console.log("我是组件里的方法")
}
}
}
const vm = new Vue({
el:'#app',
data:{
},
methods:{
getElement() {
//获取组件里的值
console.log(this.$refs.com.msg)
//获取组件里的方法
console.log(this.$refs.com.action())
}
},
components:{
com
}
})
- 测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 获取DOM元素 ,ref是英文单词reference的缩写-->
<p id="p" ref="pr" @click="getElement">我家里有矿</p>
<!-- 通过ref进行组件引用 -->
<com ref="com"></com>
</div>
<template id="tem">
<div>
<button @click="action">我就是一个子组件</button>
</div>
</template>
<script type="text/javascript">
const com = {
template:"#tem",
data:function() {
return {
msg:'我是组件里的属性值'
}
},
methods:{
action(){
console.log("我是组件里的方法")
}
}
}
const vm = new Vue({
el:'#app',
data:{
},
methods:{
getElement() {
//这种直接操作dom的方法获取元素,在vue是不提倡这样做的,当然你这样做了没人拦
console.log(document.getElementById("p").innerText)
//vue中提倡使用的方法
console.log(this.$refs.pr.innerText)
//获取组件里的值
console.log(this.$refs.com.msg)
//获取组件里的方法
console.log(this.$refs.com.action())
}
},
components:{
com
}
})
</script>
</body>
</html>
