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