이것이 Vue3가 ref를 통해 하위 컴포넌트 인스턴스(하위 컴포넌트의 DOM 구조, 데이터, 메소드)를 얻는 방법입니다.오늘은 index.vue(상위 컴포넌트) 작성 시 ref를 바인딩하여 하위 컴포넌트의 데이터와 메소드를 얻고 싶습니다. 하위 구성 요소. , 인쇄된 하위 구성 요소의 데이터는 정의되지 않았습니다. Baidu 검색의 일반적인 방법은 다음과 같습니다.
참조 연결: Vue3---ref를 통해 하위 구성 요소 인스턴스(하위 구성 요소의 DOM 구조, 데이터 및 메서드) 얻기, vue3에서 ref의 놀라운 사용, vue에서 하위 구성 요소 메서드 가져오기 및 호출, vue_vue3에서 하위 구성 요소 데이터를 사용하여 구성 요소 ref_imkaifan 가져오기 blog-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를 통해 구성 요소 인스턴스의 데이터를 가져와 정의되지 않은 것으로 인쇄하는 코드는 다음과 같습니다.
상위 구성요소
<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를 정의합니다.
1단계: DefineExpose는 하위 구성 요소 속성을 노출합니다.
DefineExpose({ select })
2단계: 하위 구성 요소에서 구성 요소 인스턴스 유형 정의
첫 번째 단계가 완료되면 상위 구성 요소가 하위 구성 요소 인스턴스의 속성을 호출하면 TS는 오류를 보고하고 속성을 찾을 수 없습니다. 작업), 따라서 대답은 다음과 같습니다. 하위 구성 요소 인스턴스의 유형을 선언하려면 유형을 정의해야 합니다.
3단계: 하위 구성 요소의 노출된 데이터 유형을 정의하고 ref를 정의하여
하위 구성 요소의 ref를 선언하고 하위 구성 요소 인스턴스를 가져옵니다(노출된 속성만 사용할 수 있음).