Vue this.$refs的使用

ref 写在标签上时：$this.ref.* 获取的是标签对应的dom元素
ref 写在组件上时：获取到的是子组件（比如counter）的引用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="test" ref="div1">
        <input type="text" ref="input1" name="name" />
        <button @click="add">添加</button>
    </div>  
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
      add(){
        // this.$refs.input1.value  = '22';
        let input1 = this.$refs.input1;
        let div1 = this.$refs.div1;
        console.log(input1,div1);
      }
    }
}