Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)

阳光穿透心脏的1/2处 2022-11-01 00:52 447阅读 0赞

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

[官方API![icon-default.png?t=L892][icon-default.png_t_L892]https://v3.cn.vuejs.org/guide/component-template-refs.html\#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8][API_icon-default.png_t_L892_icon-default.png_t_L892_https_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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[API_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_component-template-refs.html_E6_A8_A1_E6_9D_BF_E5_BC_95_E7_94_A8]: /images/20221024/b8dd4d3c66de46d38316115c0b7add54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20221024/c9deeb14496a47ba8a681f0dc1bdf015.png