VUE -- defineExpose-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE -- defineExpose。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

定义

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>