10. ref与refs

ref绑定在dom元素或者组件上，则可以操作其属性与方法。

例子 （绑定在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</div>
</template>
<script>
export default {
  methods:{
    tba(){
      alert('B');
    }
  }
}
</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>