defineExpose
definition
defineExposeDefinition: Used for the ability of parent components to call operation sub-component methods and responsive attribute parameters in component communication.
definExposeThere are two copy object functions that you need to know before using them.
Object copy: shallowReactiveand data copy:shallowRef
Both of these are included in the vue package.
Just walk through it briefly
shallowReactive : Responsiveness (shallow responsiveness) for processing the outermost properties of objects.
shallowRef: Only handles responsive processing of basic data types, and does not perform responsive processing of objects.
demo
<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>
The subgroup defines a reactive value and a method
<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>
The parent component defines two buttons, which are to call the value of the sub-component and to call the method of the sub-component.
Define const editInfo = shallowRef(Edit)a copy of the attributes of the subcomponent called editinfo
and specify this data processing object<edit ref="editInfo" :name=ref1></edit>
Linked by ref. Below are some operation pictures
