vue3中通过ref获取子组件实例，取值为undefined

也就是Vue3如何通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，今天写index.vue(父组件）时想获取子组件的数据和方法，通过给子组件绑定ref，打印子组件的数据为undefined；百度搜索常用方法为：

参考连接：Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，vue3中ref的妙用，vue中获取调用子组件方法，vue中使用子组件数据_vue3 获取组件ref_imkaifan的博客-CSDN博客代码如下：

子组件

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

而我通过ref获取组件实例的数据打印为undefined的代码为：

父组件

<template>
    <div>
    <welcome></welcome>
    </div>
</template>

<script setup lang="ts">
  import welcome from './welcome.vue'
  import { ref,onMounted } from 'vue'

const welcomeRef = ref(null);
console.log("welcomeRef ",welcomeRef.value.isScroll)  //welcomeRef undefined
<script>

子组件

<template>
    <div v-if="isScroll">
    测试内容1
    </div>
    <div v-else>
    测试内容2
    </div>
</template>

<script setup lang="ts">
  import { ref,onMounted } from 'vue'

  const isScroll= ref(false);
<script>

后来查阅资料得出：

基于 <script setup> + TS 的情况

分三步

1、在子组件暴露需要被父组件调用的属性

2、在子组件定义类型

3、父组件引入子组件的类型，并定义 ref

第一步：defineExpose 暴露子组件属性
defineExpose({ select })

第二步：在子组件定义组件实例类型
如果完成第一步的话，在父组件调用子组件实例里某个属性的时候，TS 会报错，找不到该属性（但不影响运行）所以这里还需要定义一个类型，来声明子组件实例的类型

第三步：定义子组件的暴露的数据类型，并定义 ref
声明子组件的 ref ，获取子组件实例（注意只能使用暴露出来的属性）

vue3中通过ref获取子组件实例，取值为undefined

猜你喜欢