<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<div id="app">
<p id="here" ref="here">{{message}}</p>
<input type="button" value="获取元素" @Click="getElement" ref="input">
<hr>
<login ref="mylogin"></login>
</div>
</body>
<script>
var login={
template:'<h1>登录组件</h1>>',
data(){
return{
msg:'son msg'
}
},
methods:{
show(){
console.log("调用了子组件的方法");
}
}
}
let app=new Vue({
el:'#app',
data:{
message:'Hello World'
},
methods:{
getElement(){
console.log(this.$refs.here.innerText);
console.log(this.$refs.mylogin);
}
},
components:{
login
}
})
</script>
</html>
