Vue获取页面元素
vue
中使用ref
可以获取Dom
元素和组件,如下:
<body>
<div id="app">
<input type="button" value="获取元素" @click="getElement">
<login ref="mylogin"></login>
<h3 ref="myh3">hello</h3>
</div>
<script>
var login = {
template: "<h1>登录组件</h1>",
data() {
return {
msg: "hello component"
}
},
}
var vm = new Vue({
el: "#app",
data: {
},
methods: {
getElement() {
// 通过ref获取Dom元素
console.log(this.$refs.myh3.innerText);
// 通过ref获取组件
console.log(this.$refs.mylogin.msg);
}
},
components: {
login
}
})
</script>
</body>
获取组件之后,可以展示组件中的数据,使用组件中的方法,从这一点看来很有意义!