Vue3项目开发使用技巧setup

2023-10-31

<script setup>

<script setup>
import { ref, watch, onMounted, computed ,getCurrentInstance,} from 'vue';

import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
//const route = useRoute();
//const router = useRouter();
const { query, params } = useRoute();
const store = useStore();
//使用refs
internalInstance = getCurrentInstance();
// { proxy } = getCurrentInstance()
internalInstance.proxy.$refs.aaa
// proxy.$refs.aaa
const detailBtn = ref(1);

defineExpose({ symbolsList }); //导出

onMounted(() => {});
</script>

//使用
<Index ref="I"></Index>

<script setup>
    import Index from "./index.vue";

    const I = ref(null);
    
    function test() {
        console.log(I.value?.symbolsList) // Hello World
    }
</script>

<script>

<script>
import { onMounted, ref } from 'vue';
export default {
  name: 'List',
  components: {  },
  props: {
    value: {
      type: [Number, String],
      default: undefined,
    },
  },
  emits: ['', ''],
  setup(props, { attrs, slots, emit, expose }){
  const visible = ref(false);
  const onClick = (item, idx) => {
      visible.value = false;
      emit('select', item, idx)
    }

    //导出
	expose({onClick});
    return {
      visible,
      onClick,
    }

  }
}
</script>

//使用
<Index ref="I"></Index>

<script setup>
    import Index from "./index.vue";

    const I = ref(null);
    
    function test() {
        console.log(I.value?.symbolsList) // Hello World
    }
</script>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3项目开发使用技巧setup 的相关文章

  • 如何从ArrayBuffer中获取二进制字符串?

    JavaScript中如何从ArrayBuffer中获取二进制字符串 我不想对字节进行编码 只需将二进制表示形式获取为字符串 提前致谢 以下代码将一致地转换ArrayBuffer to a String并再次返回 而不会丢失或添加任何额外的
  • 如何在CKEditor 5中监听焦点事件

    我想听一下 CKEditor 5 中的焦点事件 我认为这样的事情会起作用 但回调从未被调用 document querySelector editable ClassicEditor create el then editor gt edi
  • ExtJS 4:克隆商店

    我正在尝试找出如何克隆Ext data Store不保留旧的参考 让我用一些代码更好地解释一下 这是源商店 var source Ext create Ext data Store fields name age data name foo
  • React延迟加载/无限滚动解决方案

    我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https github com jasonslyvia react lazyload 演示在滚动时延迟加载图像 但在测试时我无法获得相同的行为 罪魁祸首是
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil
  • Angular-Datatables + Angular-xeditable:取消可编辑行

    当组合 Angular DataTables 和 Angular XEditable 时 添加新行时会取消可编辑行 这是jsfiddle https jsfiddle net faj61h5d 10 示例操作如下 1 这是初始状态 2 将第
  • 有没有办法在 TypeScript 2+ 中全局添加类型定义?

    我有一堆简单的 ts files 不是项目 即独立的 ts 脚本 他们使用一些 Node js 功能 TypeScript 和节点类型定义通过安装 npm install g typescript npm install g types n
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • chrome 扩展 - 将数据从后台传递到自定义 html 页面

    创建浏览器扩展 我必须从 background js 打开新选项卡并将 JSON 数据传递到这个新选项卡 在新选项卡中 我使用传递的 JSON 数据来操作 渲染 DOM 下面是我的 background js 的一部分 我在其中使用自定义
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • IE6 丢失查询字符串

    我有一个使用 javascript 从查询字符串中获取值的页面window location 从网络服务器运行时效果很好 但如果我通过将其放在地址栏中使用 IE6 在本地运行它 c mysite index htm 网站创建的任何查询字符串
  • Jade(当前称为“Pug”)模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可
  • 盒式捆绑包与 MVC4 捆绑包

    我目前正在开发一个原型 ASP NET MVC 3 解决方案 该解决方案将用作多个项目重写的基础 来自 Web 表单 我的目标之一是跨应用程序实现一些脚本管理 而不是我们目前没有的目标 MVC 3有一个缺陷恕我直言 如果您需要在部分视图或模
  • Chrome Prerender 功能每次都会被取消

    我正在尝试 Chrome 中的预渲染功能 但是当我检查网络时 我可以看到任何链接的请求都被取消 我使用以下语法 我尝试了现场演示http prerender test appspot com http prerender test apps
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • 我可以防止将 Leaflet 地图平移到世界边缘之外吗?

    有没有办法限制平移到世界边缘之外 在这幅画中 棕色是世界 灰色是虚空 我想让它不可能像这样平移 Leaflet 允许您控制地图抵抗被拖出边界的程度maxBoundsViscosity选项 值 0 到 1 将其设置为最大值会完全禁用拖动出界
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 大坝安全监测有哪些监测项目

    大坝安全监测有 工程主体结构 地基基础 两岸边坡 相关设施以及周围环境所作的测量及观察 也包括对建筑物外表及内部大范围对象的定期或不定期的直观检查和仪器探查 通过观测仪器和设备 以及时取得反映大坝和基岩性态变化以及环境对大坝作用的各种数据的
  • centos6.5搭建贴吧云签到平台(多图预警)

    前提 我已经用oneinstack服务搭建好了主机环境LNAMP Linux NginxApache Mysql php 默认目录是 data wwwroot default 详细步骤 1 先下载要安装的文件 我用的是GitHub上star
  • 虚拟机vmware安装win10提示operating system not found解决办法

    首先如果启动提示进入BIOS 则删除下述文件的efi 首先先设置启动PE镜像 加载启动盘PE ISO后进入PE 将系统镜像复制到U盘 PE里先分区 然后再安装 PE里安装完后重启 后面的步骤按自动的即可
  • postman循坏调用接口

    postman循坏调用接口 新建一个Collections 在新建的Collections里面新建需要循环的接口 将需要循坏变化的参数设置成变量 设置好变量之后 运行整个collections 变量值的数量应该与迭代次数一致 可以导入jso
  • YOLOv5+单目测距(python)

    YOLOv5 单目测距 python 1 相关配置 2 测距原理 3 相机标定 3 1 标定方法1 3 2 标定方法2 4 相机测距 4 1 测距添加 4 2 细节修改 可忽略 4 3 主代码 5 实验效果 相关链接 1 YOLOV7 单目
  • python ttk Treeview的插入、清空、各种点击事件、获取条目值、标题单击排序

    昨天整了一天Tkinter的treeview 发现中文的教程乃至提问都很少 其中两个问题的解决都是靠steakoverflow上找到的 在这里放出来我遇到并解决的问题 大家以后可能遇到的话就能省点事了 插入方法 import tkinter
  • 第二章-Kali安装

    目录 2 Kali Linux安装 硬盘安装 虚拟机安装 01硬盘安装 02DOCKER 03虚拟机安装 3 Kali Linux 安装 持久加密USB安装 熟悉环境 熟悉BASH命令 01 持久加密USB安装 1 02 持久加密USB安装
  • 专注于开源技术的研究与应用由Tencent://Message协议想到的一个解决方案

    源代码下载 http files cnblogs com phinecos HelloWorldProtocal rar 前天在BruceZhang 的一篇博文 求助 如何在ASP页面中调用Winform程序呢 中回答了他提出的问题 但细想
  • jsp调用证书类ocx控件问题

    1 先注册ocx 本次使用的方式是先将我调用的两个控件打包成 CAB文件 然后做成一个exe让用户去下载注册 2 jsp页面上使用 进行调用 ps clsid可以在注册表中找到 id是自己定义的 因为控件在第一步已经注册到注册表里 code
  • 重学Elasticsearch7(来源官方文档)

    一 开篇总览 1 bulk操作最好请求体数据大小在5m 15m 2 由于要给文件系统缓存留下足够空间 es的jvm堆大小不要超过服务器可用内存空间的一半 二 聚合 1 在聚合时 missing字段可以给没有该字段的文档以默认值 2 带权重的
  • html登录页面整理

    img src data image png base64 iVBORw0KGgoAAAANSUhEUgAAAycAAAJGCAYAAABBdvriAAAgAElEQVR4Aey9W5okN5KsWUz2qmaxs7zzNEvoSo78Ii
  • java自动化测试语言高级之Java 9 新特性

    java自动化测试语言高级之Java 9 新特性 文章目录 java自动化测试语言高级之Java 9 新特性 Java 9 新特性 Java 9 新特性 Java 9 发布于 2017 年 9 月 22 日 带来了很多新特性 其中最主要的变
  • 内嵌模式搭建Hive

    在此之前已经搭建好了一个三台机器的hadoop集群 https blog csdn net QYHuiiQ article details 123055389 spm 1001 2014 3001 5501 接下来在此基础上搭建hive 下
  • (C++)GDAL学习笔记——1 均值滤波和中值滤波

    就要开始研究生生活了 这个暑假要学一下GDAL相关的知识 这里将中间完成的一些东西Mark下来 方便自己以后回顾 任务 利用Vc 编写一个3 3的均值滤波或中值滤波程序 代码 注 此次试验用到的影像为波段数为1的tif格式影像 主函数 in
  • 2022 年 MathorCup 高校数学建模挑战赛——大数据竞赛赛道 赛道 B:北京移动用户体验影响因素研究

    问题 1 根据附件 1 和附件 2 分别研究影响客户语音业务和上网业务 满意度的主要因素 并给出各因素对客户打分影响程度的量化分析和结果 附件 1 2 中各字段的解释说明见附件 5 问题一本质就是特征筛选问题 而且要给出各特征影响程度的量化
  • node实现发送邮件和上传文件功能

    文章目录 node实现发送邮件带附件 node 是什么 下载 文件结构 index html文件 nodemails js文件 node实现发送邮件带附件 记录下我前不久刚刚接触过的node用来实现发送邮件和上传文件图片功能 希望能帮到和我
  • L2-021 点赞狂魔分数

    微博上有个 点赞 功能 你可以为你喜欢的博文点个赞表示支持 每篇博文都有一些刻画其特性的标签 而你点赞的博文的类型 也间接刻画了你的特性 然而有这么一种人 他们会通过给自己看到的一切内容点赞来狂刷存在感 这种人就被称为 点赞狂魔 他们点赞的
  • vector扩容

    扩容原理 vector以连续的数组存放数据 当vector空间已满时会申请新的空间并将原容器中的内容拷贝到新空间中 并销毁原容器 存储空间的重新分配会导致迭代器失效 因为分配空间后需要进行拷贝 编译器会预分配更多空间以减少发生拷贝影响程序效
  • 音视频绕不开的话题之WebRTC

    什么是WebRTC 闲来无事 我们今天探讨下音视频绕不开的一个话题 WebRTC WebRTC之于音视频行业 无异于FFMpeg 可以说WebRTC的开源 让音视频行业大跨步进入发展快车道 WebRTC是一个支持实时音视频通信的开源项目 它
  • Vue3项目开发使用技巧setup