Vue笔记四：Vue获取DOM元素和组件元素的方法
Vue获取组件元素
如果想使用哪个DOM元素，就给它加上ref属性，然后用$refs属性获取它的元素对象，示例如下： 全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue获取DOM元素的方法</title>
</head>
<body>
<div id="app">
<!-- 为h1添加ref属性，属性自定义 -->
<h1 ref="h1text">yoyo!这里是h1</h1>
<input type="button" name="单击" @click="btn" value="单击" />
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
var vm=new Vue({
el:#app,
data:{
},
methods:{
btn(){
// 使用this.$refs.自定义属性，即可获取到我们刚刚定义到的标签
console.log(this.$refs.h1text)
}
}
})
</script>
</body>
</html>
运行：
ref获取组件元素
可在上一步代码基础之上进行修改 一共是三步 第一步：创建组件，声明数据和方法 第二步：为组件添加ref属性 第三步：通过$refs属性获取组件 全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue获取DOM元素的方法</title>
</head>
<body>
<div id="app">
<!-- 为h1添加ref属性，属性自定义 -->
<h1 ref="h1text">yoyo!这里是h1</h1>
<input type="button" name="单击" @click="btn" value="单击" />
<login ref="mylogin"></login>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
// 创建组件login
var login={
template:<div><h1>登录</h1></div>,
data(){
return {
// 声明数据
msg:子组件内容
}
},
methods:{
// 声明子组件的方法
show(){
console.log("子组件的方法")
}
}
}
var vm=new Vue({
el:#app,
data:{
},
methods:{
btn(){
// 使用this.$refs.自定义属性，即可获取到我们刚刚定义到的标签
console.log(this.$refs.h1text.innerText)
console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components:{
login
}
})
</script>
</body>
</html>
运行
