(1)在标签上绑定一个ref属性,该属性可以获得该标签的dom对象
<div id="app">
<div ref="hi" @click="say" class="demo" id="only">Hello World</div>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
say() {
console.log(this.$refs)
}
}
})
</script>
结果:this.refs对象上有个hi对象,hi对象就是该标签的dom对象。
在组件中使用ref属性:
<div id="app">
组件一的值:<counter ref="one" @change="sum"></counter>
组件二的值:<counter ref="two" @change="sum"></counter>
一和二的总和:<span>{{sumNumber}}</span>
</div>
<script>
Vue.component('counter', {
template: `<div @click="handle">{{number}}</div>`,
data: function(){
return {
number: 0
}
},
methods: {
handle(){
this.number ++
this.$emit('change')
}
}
})
var vm = new Vue({
el: '#app',
data: {
sumNumber: 0
},
methods: {
sum() {
this.sumNumber = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>
结果:
注意:this是Vue实例
(2)el属性是element的意思,可以用实例上的$mount方法代替
var vm = new Vue({
data: {
},
})
vm.$mount('#app');