案例一、ref 写在标签上时

<!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用--><div id="root"><!-- ref = 'hello'： 给div 起了一个引用的名字 hello --><divref = 'hello'@click = "handleClick">laugh yourself</div></div><script>var vm = new Vue({el: '#root',methods: {handleClick: function() {//this.$refs : 获取整个Vue实例中所有的引用 然后再找到hello这个引用 指向div那个dom节点//console.log(this.$refs.hello)alert(this.$refs.hello.innerHTML)}}})</script>

案例二、 ref 写在组件上时
计数：

<!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用--><div id="root"><!-- 子组件触发了事件 这里父组件(模板区里面)监听该事件 调用handleChange方法 因此handleChange方法定义在父组件的methods里面--><counter ref="one" @change="handleChange"></counter><counter ref="two" @change="handleChange"></counter><div>{{total}}</div></div><script>Vue.component('counter', {template: '<div @click="handleClick"> {{number}} </div>',data: function() {return {number: 0}},methods: {handleClick: function() {this.number ++//子组件向父组件传值  子组件被点击的时候 number+1  同时告诉外面 也即是触发一个事件this.$emit('change')}},})var vm = new Vue({el: '#root',data: {total: 0},methods: {handleChange: function() {//在此方法中计算两个数量的和  通过this.$refs.引用名字 获取两个子组件的引用this.total = this.$refs.one.number +this.$refs.two.number}}})</script>