Vue3 子传父 暴露数据 defineExpose

简介: Vue3 子传父 暴露数据 defineExpose

defineExpose 属性:用于将子组件中的数据和方法,暴露给父组件,父组件再配合 ref 属性使用。

语法格式

// 子组件:暴露数据和方法
defineExpose({ 数据, 数据, 方法 });
 
// 父组件:使用数据和方法
ref名称.value.数据
ref名称.value.方法()

基础使用

一、子组件:创建 Child 子组件,通过 defineExpose 暴露数据和方法。

<template>
  <h3>我是 Child 组件</h3>
  <p>{{ info.name }} : {{ info.age }}</p>
</template>
 
<script setup>
import { reactive } from "vue";
let info = reactive({ name: "张三", age: 20 });
const isChild = () => {
  console.log("我是子组件");
};
// 暴露 info 数据和 isChild 方法
defineExpose({ info, isChild });
</script>

二、父组件:给 Child 组件标签绑定 ref 属性,使用数据和方法。

<template>
  <h3>首页</h3>
  <button @click="edit">父组件的按钮</button>
  <hr />
  <Child ref="content"></Child>
</template>
 
<script setup>
import Child from '../components/Child.vue';
import { onMounted, ref } from 'vue';
// 获取 Child 组件实例对象
let content = ref();
 
console.log("setup中使用:", content.value); // undefined
 
onMounted(() => {
  console.log("挂载后使用:", content.value.info);
})
 
const edit = () => {
  // 执行子组件中的 isChild 方法
  content.value.isChild();
  // 修改子组件中的 age 数据
  content.value.info.age++;
  console.log(content.value.info);
}
</script>

:子组件加载完毕后,才能使用数据和方法。所以不能直接在 setup 中使用。

最终效果:


相关文章
|
5天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
27 0
Vue3 基础语法
|
8天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
14 0
|
8天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
22 3
|
11天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
26 0
|
11天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
11天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
22 0
|
11天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
29 0
|
11天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
42 0
|
11天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
15 1
|
11天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
20 0