? ? ? ? Vue3中，如果要在父组件拿到子组件(子组件的DOM结构、数据、方法)，可以通过 ref。即在父组件中定义响应式数据 ref(null) ，并绑定给子组件，在需要的时候，通过定义的响应式变量即可获取。获取后，即获取了子组件的一切，可以看到子组件的DOM结构，也可以看到子组件中对外暴露的的数据和方法，并且可以直接调用。

官方APIhttps://v3.cn.vuejs.org/guide/component-template-refs.html#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8

子组件 <template> <div class="hello"> <h1>{{ msg }}</h1> <input type="file" id="fileInput" name="file" multiple="multiple" @change="selectFile"/> </div> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'HelloWorld', setup() { const msg = ref('HelloWorld') // 响应式数据：msg const fileList = ref([]) // 响应式数据：上传的文件列表 function selectFile () { // 有文件上传时 var file = document.getElementById('fileInput').files[0] // File(Blob) 对象 File extends Blob fileList.value.push(file) } return { // return中的数据会被父组件拿到 msg, fileList, selectFile } } }) </script> 父组件 <template> <div class="home"> <HelloWorld ref="sonRef" /> <button @click="getSonComponent">GetSonComponent</button> </div> </template> <script> import { defineComponent, ref } from 'vue' import HelloWorld from '@/components/HelloWorld.vue' export default defineComponent({ name: 'Home', components: { HelloWorld }, setup(){ const sonRef = ref(null) // 通过 ref 绑定子组件 function getSonComponent () { // 通过 ref 获取子组件\ // 获取子组件的数据 console.log(sonRef.value) console.log(sonRef.value.msg) sonRef.value.fileList.forEach(item => { console.log(item) }) } return { sonRef, getSonComponent } } }) </script>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。