使用ref访问子组件实例或子元素

点击打开视频讲解更加详细

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。

<template>
  <div id="app">
    <HelloWorld ref="refChild"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return {
    } 
  },
  created(){
    console.log(this.$refs.refChild)    //undefined Dom模板未渲染完成
  },
  mounted(){
    console.log(this.$refs.refChild)
    console.log(this.$refs.refChild.data)
    console.log(this.$refs.refChild.change())
  },
  components:{
    HelloWorld
  },
  computed:{
  },
  methods:{
  }
}
</script>
<style scoped>
</style>

src\components\HelloWorld.vue

<template>
  <div class="hello">
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: [],
  data(){
    return{
      data:'子组件'
    }
  },
  mounted(){
  },
  methods:{
    change(){
      console.log('5555')
    }
  }
}
</script>
<style scoped>
</style>

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。