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

srccomponentsHelloWorld.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。