也就是Vue3如何通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法),今天写index.vue(父组件)时想获取子组件的数据和方法,通过给子组件绑定ref,打印子组件的数据为undefined;百度搜索常用方法为:
子组件
<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、在子组件暴露需要被父组件调用的属性
扫描二维码关注公众号,回复:
16575153 查看本文章
![](/qrcode.jpg)
2、在子组件定义类型
3、父组件引入子组件的类型,并定义 ref
第一步:defineExpose 暴露子组件属性
defineExpose({ select })
第二步:在子组件定义组件实例类型
如果完成第一步的话,在父组件调用子组件实例里某个属性的时候,TS 会报错,找不到该属性(但不影响运行)所以这里还需要定义一个类型,来声明子组件实例的类型
第三步:定义子组件的暴露的数据类型,并定义 ref
声明子组件的 ref ,获取子组件实例(注意只能使用暴露出来的属性)