vue3获取子页面中的数据

最新推荐文章于 2024-09-12 14:41:57 发布

D_Fortune

最新推荐文章于 2024-09-12 14:41:57 发布

阅读量206

点赞数 3

分类专栏：前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/d_fortune/article/details/140618941

版权

前端专栏收录该内容

53 篇文章 0 订阅

订阅专栏

Child页面

<template>
  <div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const message = ref('Hello!')
 
// 使用defineExpose公开message属性
defineExpose({
  message
})
</script>

Parent页面

<template>
  <div>
    <ChildComponent ref="childRef" />
    <el-button @click="getChildMessage ">获取子页面的值</el-button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const childRef = ref(null)
 
const getChildMessage = () => {
  let childMessage = childRef.value.message
}
 

</script>