首页 > 其他分享 >vue3 defineExpose()

vue3 defineExpose()

时间:2023-06-27 22:00:52浏览次数:29  
标签:defineExpose script setup 实例 vue3 组件 ref

使用 script setup 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 script setup 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 script setup组件中要暴露出去的属性:

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

标签:defineExpose,script,setup,实例,vue3,组件,ref
From: https://www.cnblogs.com/coderz1/p/17510031.html

相关文章

  • vue3自定义hook
    什么是hookshook是钩子的意思,看到“钩子”是不是就想到了钩子函数?事实上,hooks还真是函数的一种写法。vue3借鉴reacthooks开发出了CompositionAPI,所以也就意味着CompositionAPI也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法,就是将文件的一些单独功......
  • vue3标准开发过程
    1.如何用脚手架快速新建一个vue3项目安装vue-cli后,用如下命令创建 vuecreatemy-vue3-project 默认创建vue3项目,直接回车即可。 新建完成后,如何引入element-plus? 用Webstrom打开项目,先运行一次npminstall然后运行npminstallelement-plus--save 然后打开m......
  • vue3透传 Attributes
    “透传attribute”指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者 v-on 事件监听器。最常见的例子就是 class、style 和 id当一个组件以单个元素为根作渲染时,透传的attribute会自动被添加到根元素上A组件:<template><h3>ComponentA</......
  • vue3引入bootstrap5的折叠菜单无效问题解决
    问题:通过npm后者yarn安装bootstrap5后,在入口文件全局引入bootstrap5的js、scc,在vue组件引入折叠功能,点击可以正常展开,在点击无法收回解决办法:可参考网上博主的建议,大概意思就是之前引入的js文件不对,导致收回方法没有执行import'bootstrap/dist/js/bootstrap.bundle'main入口......
  • 【Vue3】Vue3中常用的组件传参方式
    props/$emit父传子(自定义属性props)//父组件代码<Son:name="test"/>//子组件代码<div>{{name}}</div>props:{name:{type:String,default:"default",},}子传父(自定义this.$emit)//子组件代码<button@click=&qu......
  • 【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件
    1.安装依赖插件vite-plugin-svg-iconsvite-plugin-svg-icons用于生成svg雪碧图。特点:1.预加载在项目运行时就生成所有图标,只需操作一次dom2.高性能内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons官方文档pnpmaddvite-plugin-svg-icons2.安装......
  • vue3.0之axios使用
    //导入包importaxiosfrom"axios";//使用示例axios.post('发送请求地址',{携带变量key1:变量value1,携带变量key2:变量value2,}).then(response=>{//后端返回给前端的数据都在response.data里,可以通过“response.data.键”进行调用if(response.data.cod......
  • vue3.0之emit的使用
    主要用于跨组件传输数据,emit可以调用父组件中的自定义函数。使用方法letemit=defineEmits(['父组件自定义函数1','父组件自定义函数2','...'])//调用父组件自定义函数的执行emit('父组件自定义函数')主要逻辑在父组件中定义一个自定义函数<template><Loginv-if......
  • vue3.0之cookies的操作
    安装npminstallvue-cookiesimportVueCookiesfrom'vue-cookies'constcookies=VueCookiescookies.set('key值','字符串或变量','7d')//7d代表时间,存放7天cookies.get('key值')//取出key值对应的数据cookies.remove('ke......
  • VUE3学习笔记
    VUE3出现已经很长时间了,由于工作比较忙,项目比较紧,现在才看,已经晚于很多人了。这是vue3学习笔记,边学边写。1,项目创建可以使用git下载:winptyvue.cmdcreatehello-world使用之后会让你选择vue2还是3可以直接node创建:vuecreatedemo2,组件传值多了个类型校验,传值......