要点:
这里的$ref相关的操作就是为了避免操作DOM,Vue提供的方案。效果等同于原生的id,然后操作
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取元素" @click="getElement">
<h3 ref="showcool">陈小帅是真的帅呢?</h3>
<show ref="myshow"></show>
</div>
<script>
var show = {
template:'<h1>谁说不是呢?哈哈哈</h1>',
data(){
return{
msg:'子组件的msg'
}
}
};
var vm = new Vue({
el:'#app',
methods:{
getElement(){
// console.log(this.$refs.showcool.innerText);
console.log(this.$refs.myshow.msg);
//ref是reference缩写,s表示复数
}
},
components:{
show
}
});
</script>
</body>
</html>
效果: