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