Vue3中defineExpose暴露出来的数据如何响应式

作者：管理员 2022-06-06 11:06:54 分类：Vue3新篇章阅读（4886） 0

在最开始认识defineExpose时候，着实眼前一亮，没想到子组件到父组件通信还能如此简单，事实上并非如此，深入了解后它似乎并没有我们一开始想象的那么完美，默认情况下，defineExpose暴露出来的数据父组件渲染后，当子组件数据发生改变，父组件是不会自动响应的，那么如果我们实在想响应式更新该怎么办？

解决方式

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
<div class="child">
子组件
</div>
<el-button type="primary">更新数据</el-button>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
let val = ref('我是子组件')
let updateval = (data) => {
val.value = data;
}
defineExpose({
val, updateval
})
</script>

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//父组件
<template>
<div class="box">

<v-child ref='child'></v-child>
<p>子组件暴露传过来的值== {{ childrendata }}</p>

<el-button type="primary" @click="updateval">修改子组件暴露的值</el-button>

</div>
</template>
<script lang="ts" setup>
import vChild from "../components/child.vue";
import { ref, onMounted } from 'vue';
// 获取child实例
let child = ref();
let childrendata = ref('');
// console.log(childrendata); // 注意，在这里是无法获取到子组件的value值
onMounted(() => {
childrendata.value = unref(child).val // 获取子组件暴露的val值
})

// 重点
const updateval = () => {
// 调用子组件的 updateval 方法
unref(child).updateval('小王八羔子');
// 重新将子组件的val 赋值给 childrendata
childrendata.value = unref(child).val
}
// 父组件中通过方法首次触发重新获取并赋值也可以拿到最新的值

//监听数据
watch(childrendata, (newValue, oldValue) => {
console.log('监听childrendata', newValue, oldValue)
})
</script>

当然，在这里我们举例是在父组件触发子组件暴露过来的updateval方法从而更新子组件暴露的val值，如果在子组件内部点击修改，我们可以通过在子组件中去触发父组件的自定义事件，在自定义事件里重新对childrendata.value = unref(child).val赋值

小结

总而言之，如果想获取最新子组件暴露的值，那就要手动触发去获取该值，感觉该方式做响应式通信就不是那么好了，vue组件通信方式特别多，需要我们在合适的时机用最合适的方法才好

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

Vue3 组件通信

上一篇：React状态管理redux、react-redux、redux-thunk、以及分模块hooks中使用方式

下一篇：vue3+vite2中使用unplugin-auto-import eslint插件vscode报错警告

Vue3中defineExpose暴露出来的数据如何响应式

解决方式

子组件

父组件

小结

相关推荐

共 0 条评论关于"Vue3中defineExpose暴露出来的数据如何响应式"

点击取消