使用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。