<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/bootstrap3.3.7.css">
</head>
<body>
<div id="app">
<input type="button" value="获取元素" @click="getElement" ref="mybtn">
<h3 id="myh3" ref="myh3">哈哈哈哈哈哈哈</h3>
<login ref="mylogin"></login>
</div>
<script>
var login={
template:"<h1>登录组件</h1>",
data() {
return {
msg:'son msg'
}
},
methods: {
show(){
console.log('调用了子组件的方法')
}
},
}
var vm = new Vue({
el: '#app',
data: {
},
methods: {
//ref是英文单词[reference] [referenceError]
getElement(){
// console.log(this.$refs.myh3.innerText);
console.log(this.$refs.mylogin.msg);
this.$refs.mylogin.show()
}
},
components:{
login
}
})
</script>
</body>
</html>
Vue——22——使用ref获取DOM元素和组件引用
猜你喜欢
转载自blog.csdn.net/x1037490413/article/details/107344433
今日推荐
周排行