13.ref与refs

ref若绑定在dom元素，则是用来操作dom。若绑定在组件上，则可以访问改组件的data和methods等。

例子 （绑定在dom元素）

<template>
  <div>
      <input type="file" ref="input" @change="addImage">
      <ul>
        <li v-for="(item,key) in imageList" :key="key"><img :src="item" alt=""></li>
      </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageList:[]
    }
  },
  methods:{
    addImage (){
      let self = this;
      let file = this.$refs.input.files[0]; //操作dom原生属性
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        self.imageList.push(this.result);
        self.$refs.input.value = ''; //操作dom原生属性
      }
    }
  }
}
</script>

例子 （绑定在组件上）

<template>
  <div>
    <B ref="B"></B>
  </div>
</template>
<script>
import B from "@/template/b";
export default {
  components:{
    B
  },
  mounted(){
    this.$refs.B.tba();
  }
}
</script>

<template>
  <div>B</div>
</template>
<script>
export default {
  methods:{
    tba(){
      alert('B');
    }
  }
}
</script>