VUE -- defineExpose

news2024/9/21 23:32:17

defineExpose

- 定义
- demo

定义

defineExpose定义：用于组件通信中父级组件调用操作子组建方法和响应式属性参数能力

在使用definExpose前需要了解两个拷贝对象函数

对象copy：shallowReactive 与数据 copy：shallowRef

这两个都是vue包里面的

简单带过一下

shallowReactive ：处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

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>

子组建定义了一个响应式值和一个方法

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