简介
ref作用:
可用于引用DOM对象。
可用于引用Vue组件(访问子组件data,调用子组件方法)。
演示
引用DOM对象
<body>
<div id="content">
<h1 ref="content1">11111111111111</h1>
<div ref="content2">{{msg}}</div>
<button @click="dayin()">打印看看vue的ref中有啥</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#content',
data:{
msg:'需要显示的内容'
},
methods:{
dayin(){
console.log(this);
}
}
});
</script>
点击按钮,查看log,可以看到vm.$refs里面拥有使用了ref的标签:
访问子组件data
<body>
<div id="content">
<mycom ref="myCom"></mycom>
<button @click="dayin">打印看看refs里的子组件</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#content',
data: {
msg: '需要显示的内容'
},
methods: {
dayin() {
console.log(this.$refs);
}
},
components: {
mycom: {
template:"<h1>son</h1>",
data(){
return{
sonMsg:"sonMsg"
}
}
}
}
});
</script>
运行,点击按钮,可以用vm.$refs.myCom取到子组件,自然就可以 .sonMsg 取到其data :
调用子组件方法
<body>
<div id="content">
<mycom ref="myCom"></mycom>
<button @click="dayin">调用子组件方法</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#content',
methods: {
dayin() {
this.$refs.myCom.dayinSon();
}
},
components: {
mycom: {
template:"<h1>son</h1>",
methods:{
dayinSon(){
console.log("打印Son");
}
}
}
}
});
</script>
运行,点击按钮,可以用vm.$refs.myCom取到子组件,自然就可以 .dayinSon() 调用方法 :