您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
获取dom与获取组件(refs,ref)
发布时间：2020-02-23 16:27:51编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var Test={
data:function(){
return {}
}
, template:
`<div><button ref="btn">测试</button></div>`,
mounted:function() {
//获取dom：这里获取本组件的button
console.log("dom-button",this.$refs.btn);
},
}
var App = {
data:function() {
return {
isShow:false,
}
},
template:`<div class='app'><Test ref="testC"></Test></div>`,
components:{Test},
mounted:function() {
//获取组件：这里获取本组件挂载的test组件
console.log("dom-component",this.$refs.testC);
}
}
new Vue({
el: '#app',
template: `<App />`,
data() {
return {}
},
components:{App,Test}
});
</script>
</body>
</html>
关键字词：vue,dom,组件,获取,refs,ref
上一篇：生命周期