vue跟react区别（VUE — defineExpose）

时间2025-06-21 00:58:11分类IT科技浏览4230

导读：定义 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>

父组建定义了两个按钮，分别是调用操作子组建的值，和调用子组建的方法

定义了 const editInfo = shallowRef(Edit) 将子组建的属性copy了一份叫做 editinfo

并且指定了这份数据处理对象 <edit ref="editInfo" :name=ref1></edit>

由ref 挂靠。后面是一些操作图片

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。