首页 > 其他分享 >defineExporse vue3中一个由子组件导出数据,让父组件调用的方法。

defineExporse vue3中一个由子组件导出数据,让父组件调用的方法。

时间:2023-04-01 13:46:52浏览次数:44  
标签:由子 const isFlag refMode data vue3 组件 ref

子组件

<script setup> 
import { ref, reactive } from 'vue' 
const isFlag = ref(false)
const data = reactive({      
     name: 'tom',      
     age: 18   
 })    
//把数据导出 
defineExpose({      
     data,      
     isFlag
})    
</script>

父组件

<template>     
//给组件绑定ref,从ref上获取 
<Mode ref="refMode"></Mode>  
</template>   
<script setup> 
import { ref ,reactive,onMounted} from 'vue' 
import Mode from './view/mode.vue' //ref名称必须与绑定的名称相同 
let refMode = ref(null)       
console.log('refMode',refMode.value)    
onMounted(() => {     //只能在在里面才能获取到完整的组件ref的信息 
    console.log('refMode2',refMode.value)          //通过解构获取 
    const {data,isFlag} = refMode.value;
console.log('refMode3',data,isFlag)
}) </script>

标签:由子,const,isFlag,refMode,data,vue3,组件,ref
From: https://www.cnblogs.com/anans/p/17278493.html

相关文章

  • 第二十二篇 vue - 深入组件 - 异步组件 - defineAsyncComponent
    基本用法defineAsyncComponent在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue提供了defineAsyncComponent方法来实现此功能import{defineAsyncComponent}from'vue'constAsyncComp=defineAsyncComponent(()=>{returnn......
  • 第二十四篇 vue - 深入组件 - 内置组件 - TransitionGroup
    TransitionGroup<TransitionGroup>是一个内置组件,用于对v-for列表中的元素或组件的插入、移除和顺序改变添加动画效果和的区别<TransitionGroup>支持和<Transition>基本相同的props、CSS过渡class和JavaScript钩子监听器,但有以下几点区别:默认情况下,它不会渲染......
  • 第二十三篇 vue - 深入组件 - 内置组件 - Transition
    动画组件Transition和TransitionGroupVue提供了两个可以帮助你制作基于状态变化的过渡和动画内置组件1、<Transition>会在一个元素或组件进入和离开DOM时应用动画2、<TransitionGroup>会在一个v-for列表中的元素或组件被插入,移动,或移除时应用动画除了这两个组件,我......
  • 第二十五篇 vue - 深入组件 - 内置组件 - keepAlive
    keepAlive<KeepAlive>是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件kee-alive是Vue内置的一个组件,可以使被包含......
  • 第二十七篇 vue - 深入组件 - 内置组件 - Suspense
    Suspense<Suspense>是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态<Suspense>是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关API也可能会发生变化异......
  • 第二十六篇 vue - 深入组件 - 内置组件 - Teleport
    Teleport<Teleport>是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的DOM结构外层的位置去基本用法有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在DOM中应该被渲染在整个Vue应用外部的其他地方......
  • 第二十八篇 vue - 深入组件 - 动态组件 - component
    component动态组件就是动态变化的组件,和动态样式一样,通过用户的操作来确定是什么类型的组件。动态样式是绑定:style,动态组件则是绑定:is在vue中,实现Tab切换主要有三种方式:使用动态组件,使用vue-router路由,使用第三方插件。本文将详细介绍Vue动态组件所谓动态组件就是让多......
  • [vue3]npm创建环境
    1.npm安装vuecli[root@Python20230401VUE3]#npminstall-g@vue/cli2.查看vue版本[root@Python20230401VUE3]#vue--version@vue/cli5.0.83.创建项目[root@Python20230401VUE3]#vuecreatehello-world4.执行项目$cdhello-world$npmrunserve......
  • 第二十一篇 vue - 深入组件 - 依赖注入 - provide 和 inject
    Prop逐级透传问题provide和inject可以帮助我们解决这一问题。[1]一个父组件相对于其所有的后代组件,会作为依赖提供者任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖Prop逐级透传问题通常情况下,当我们需要从父组件向子组件传递数据时,会使用pr......
  • 微信小程序组件化开发教程、微信小程序组件化开发示例代码
    微信小程序中的组件化开发可以使用template和Component两种方式来实现。template模板实现组件template模板是一种很简单的组件化方式,通常用于展示静态的内容。可以将页面中的某一段代码封装为一个template模板,再在需要使用的地方引入该模板即可。下面以一个简单的自定......