一、获取DOM元素
虽然可以通过原生js操作获取到DOM元素，但是Vue等框架已经不推荐自己操作DOM了，都扔给框架就行了。
可以给元素增加ref属性，则vue实例身上的$refs对象就会有此DOM元素数据，由此元素ref属性值作为key取到。
<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'>
<input type="button" value="获取元素" @click = "getElm">
<!-- 给元素加个ref属性 -->
<h3 ref="myh3">yoyo啦啦啦</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
getElm(){
//vue实例的$refs对象即有此DOM元素数据
console.log(this.$refs.myh3.innerHTML);
}
}
});
</script>
</body>
</html>
点击按钮。
即可以通过此种方式获取到DOM元素。
二、获取组件
也可以标签引用组件的时候给组件加上ref属性，则Vue实例的$refs中也会有此组件的引用。可以通过ref属性对应值作为key取到该组件，获取此组件data数据和methods方法。
<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'>
<input type="button" value="获取元素" @click = "getElm">
<!-- 给元素加个ref属性 -->
<login ref="mycom"></login>
</div>
<script>
var login ={
template:'<h3>登陆组件</h3>',
data(){
return {
msg:'子组件数据'
}
},
methods:{
logChild(){
console.log('执行了子组件方法');
}
}
}
var vm = new Vue({
el: "#app",
data: {
},
methods: {
getElm(){
//vue实例的$refs对象即有此组件引用
//获取子组件数据
console.log(this.$refs.mycom.msg);
//调用子组件方法
this.$refs.mycom.msg
}
},
components:{
login
}
});
</script>
</body>
</html>
点击按钮。
从上可以看出，也可以通过这种方法，实现子组件向父组件传递数据。
网友评论