详解Vue的ref特性的使用

<!-- `vm.$refs.p`将会是DOM结点 -->
<p ref="p">hello</p>

<!-- `vm.$refs.child`将会是子组件实例 -->
<child-component ref="child"></child-component>

<div id="app">
  <p ref="p">hello</p>
  <child-component ref="child"></child-component>
</div>

<script>
Vue.component('child-component', {
  template: '<h1>child-component </h1>'
})

let vm = new Vue({
  el: '#app'
})
</script>

<div id="app">
  <counter ref="child1" @change="handleChange"></counter>
  <counter ref="child2" @change="handleChange"></counter>
  <div>{{sum}}</div>
</div>

<script>
// counter组件，实现每点击一次，自增1
Vue.component('counter', {
  template: '<h3 @click="handleClick">{{count}}</h3>',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count += 1;
      this.$emit('change')
    }
  }
})

let vm = new Vue({
  el: '#app',
  data: {
    sum: 0
  },
  methods: {
    handleChange() {
      this.sum = this.$refs.child1.count + this.$refs.child2.count // 使用refs获取子组件的数据
    }
  }
})
</script>