정의
defineExpose정의: 구성 요소 통신에서 작업 하위 구성 요소 메서드 및 응답 속성 매개 변수를 호출하는 상위 구성 요소의 기능에 사용됩니다.
사용하기 definExpose전에 알아야 할 두 가지 복사 개체 기능이 있습니다 .
객체 복사: shallowReactive및 데이터 복사:shallowRef
이 두 가지 모두 vue 패키지에 포함되어 있습니다.
그냥 간략하게 살펴보세요
shallowReactive : 객체의 가장 바깥쪽 속성을 처리하기 위한 반응성(얕은 반응성)입니다.
shallowRef: 기본 데이터 유형의 반응형 처리만 처리하고 객체의 반응형 처리는 수행하지 않습니다.
데모
<template>
<div>
<el-button>
方法: {
{
method }}
</el-button>
<el-button>
值: {
{
num }}
</el-button>
<el-button>
{
{
props.name }}
</el-button>
</div>
</template>
<script lang="ts" setup>
const props = withDefaults(defineProps<{
name: string
}>(), {
name: "默认值"
})
const num = ref(123)
const method = ref("")
function changMethod(){
method.value="父类调用了这个方法改变了值"
}
defineExpose({
num,
changMethod
})
</script>
하위 그룹은 반응 값과 방법을 정의합니다.
<template>
<edit ref="editInfo" :name=ref1></edit>
<el-button @click="handleClick()">传入子类按钮</el-button>
<el-button @click="handleClick1()">改变子类属性按钮</el-button>
<el-button @click="handleClick2()">调用子类方法按钮</el-button>
</template>
<script lang="ts" setup>
import Edit from './edit.vue'
import EditPopup from "@/views/permission/admin/edit.vue";
const editInfo = shallowRef(Edit)
console.log("editInfo",editInfo)
let ref1 = ref();
function handleClick() {
ref1.value = "你好"
}
function handleClick1(){
editInfo.value.num=222
}
function handleClick2(){
editInfo.value.changMethod()
}
</script>
상위 구성 요소는 하위 구성 요소의 값을 호출하고 하위 구성 요소의 메서드를 호출하는 두 개의 버튼을 정의합니다.
const editInfo = shallowRef(Edit)호출된 하위 구성요소의 속성 사본을 정의 editinfo
하고 이 데이터 처리 객체를 지정합니다.<edit ref="editInfo" :name=ref1></edit>
심판으로 연결됨. 아래는 일부 작업 사진입니다
