首页 > 其他分享 >vue3 组件传参

vue3 组件传参

时间:2023-05-26 14:22:35浏览次数:45  
标签:传参 const 回传 vue3 组件 true

父组件

 

 

子组件

    <iframe
      :src="props.src"
      width="100%"
      height="100%"
      frameborder="0"
      id="_iframe"
    ></iframe>


接收参数
const props = defineProps({
  src: { type: String, required: true },
});

定义回传
const emit = defineEmits(['backFrame'])
回传操作
const clickBack = ()=>{
  emit('backFrame',true)
}

 

标签:传参,const,回传,vue3,组件,true
From: https://www.cnblogs.com/jqynr/p/17434599.html

相关文章

  • elementplus vue3 ts 单图预览封装
    <divclass="demo-image__preview"><el-imagestyle="width:50px":src="props.image":zoom-rate="1.2":preview-src-list="[props.image]":initial-index="4&quo......
  • vue3 打包超出限制 Some chunks are larger than 500 kBs after minification
    vite.config.ts,build:{//如果自己分片的话,就会生成37个文件//chunkSizeWarningLimit:1000,//rollupOptions:{//output:{//manualChunks(id){//if(id.includes('node_modules')){//re......
  • UML 基础: 组件图
    图的目的组件图的主要目的是显示系统组件间的结构关系。在UML1.1中,一个组件表现了实施项目,如文件和可运行的程序。不幸地,这与组件这个术语更为普遍的用法、指象COM组件这样的东西相冲突。随着时间的推移及UML的连续版本发布,UML组件已经失去了最初的绝大部分含义。UML2正式......
  • vue3 reactive响应式赋值页面不渲染问题
    问题描述://声明变量letdata=reactive([]);http().then(res=>{data=res.dataconsole.log(data)})//data数据更新,页面没有渲染,1、因数据结构而导致的未渲染解决方法:依旧是reactive,可以在外面包一层//声明letstate=reactive({data:[]})//赋值state......
  • Vue3.3 的新功能的体验(下):泛型组件(Generic Component) 与 defineSlots
    上一篇说了DefineOptions、defineModel、Props的响应式解构和从外部导入类型这几个新功能,但是没有说Generic、defineSlots等,这是因为还没有完全搞清楚可以用在什么地方。折腾了几天终于弄清楚了。这还要从TS的泛型说起。泛型的目的和意义泛型仅仅只是表达传啥都行吗?当然......
  • 解决vue3自动引入element-plus后eslint警告
    配置vue.config.js......module.exports=defineConfig({......configureWebpack:{plugins:[AutoImport({resolvers:[ElementPlusResolver()],eslintrc:{enabled:true,filepath:"./.eslintrc-auto......
  • 在中控机上部署 TiUP 组件
    以普通用户身份登录中控机。以 tidb 用户为例,后续安装TiUP及集群管理操作均通过该用户完成:执行如下命令安装TiUP工具:刷新环境重新声明全局环境变量:[tidb@azkaban01opt]$source/home/tidb/.bash_profile确认TiUP工具是否安装:[tidb@azkaban01opt]$whichtiup安装TiU......
  • 失传的museui控件组件属性
    提示框顶部导航条自动补全输入徽章底部导航组件按钮时间输入框数据表格对话框分割线表单栅格布局图标布局列表加载加载控件message弹框加载进度条选择框选择控件选项卡文本输入框消息提示提示1提示框  2顶部导航条  3......
  • vue3组件间通信
    props父子组件之间通信最好的方式//父组件<template><divclass="box"><h1>props:这里是父组件</h1><hr/><Child:money="money"></Child></div></template><scriptsetuplang="......
  • 使用form.ModelForm组件注意点
    定义类时是使用model=table中表名如下:classTplModelForm(BootStrapModelForm):classMeta:model=models.Templatefields="__all__"而在函数中定义时是使用form如下deftpl(request):ifrequest.method=="GET":form=TplModelForm() ......