如果是DOM元素上使用,ref指向的是DOM元素,如果是在子组件上使用,则指向子组件实例
注意:ref在初始渲染的时候不能被访问,$refs不是响应式的,不能用它在模板中做数据绑定
<div id="app">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
let app = new Vue({
el: '#app',
components: {
counter: {
template : '<div @click="handleClick">{{number}}</div>',
data(){
return {
number: 0,
num: 1
}
},
methods: {
handleClick(){
this.number++
this.$emit('change')
}
}
}
},
data: {
total: 0,
},
methods: {
handleChange(){
//this.$refs.one ,$refs在组件里返回对这个这组件实例的引用
console.log(this.$refs.one.number)
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>