首页 > 其他分享 >父组件 同步修改/传值 子组件 vue3

父组件 同步修改/传值 子组件 vue3

时间:2023-12-01 10:56:13浏览次数:34  
标签:jyqk const vue3 组件 ref any 传值

父组件

//引入子组件
<jyqk :selectData="selectData" ref="jyqk_ref"></jyqk>
import fxjy from "./components/fxjy.vue";
const jyqk_ref = ref<any>();
const change_data = (val: any) => {
  jyqk_ref.value.getData();
}

子组件

type prop = {
  selectData: any;
};
const propData = defineProps<prop>();
//暴露子组件
defineExpose({
  getData,
});

标签:jyqk,const,vue3,组件,ref,any,传值
From: https://www.cnblogs.com/JaneLifeBlog/p/17869226.html

相关文章

  • echart 防止多次渲染 无数据时显示暂无数据 vue3
    //基于准备好的dom,初始化echarts实例constbarDOM:any=ref();varmyChart:any;letechartNull:any=null;//渲染echartconstinit_chart=()=>{if(myChart!=null&&myChart!=""&&myChart!=undefined){myChart.dispose();......
  • vue3 标题组件
    <template><divclass="header_body"><divclass="header_inner"><divclass="title_line"></div><el-rowclass="titleBodyComl"><divclass="icon&qu......
  • 1、自定义上传组件实现动态指定action
    1、增加ynamicAction:String2、修改constuploadImgUrl=ref(props.dynamicAction||import.meta.env.VITE_APP_BASE_API+"/common/upload");//上传的图片服务器地址<el-uploadmultiple:action="uploadImgUrl"3、父组件<el-form-itemlab......
  • 通过.NET Core+Vue3 实现SignalR即时通讯功能
    .NETCore和Vue3结合使用SignalR可以实现强大的实时通讯功能,允许实时双向通信。在这个示例中,我们将详细说明如何创建一个简单的聊天应用程序,演示如何使用.NETCoreSignalR后端和Vue3前端来实现实时通讯功能。步骤1:准备工作确保你已经安装了以下工具和环境:.NETCore......
  • 记录--组件阅后即焚?挂载即卸载!看完你就理解了
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言上家公司有个需求是批量导出学生的二维码,我一想这简单啊,不就是先批量获取学生数据,然后根据QRcode生成二维码,然后在用html2canvas导出成图片嘛。由于公司工具库有现成的生成压缩包方法,我只需要获得对应的图片b......
  • 当多个使用弹窗类组件,可使用这种方式封装组件。(以下使用antd-vue、vue3)
    1.代码点击查看代码<template><slot:openDialog="openDialog":closDialog="modalCancel"></slot><a-modalv-model:open="open"title="BasicModal"@cancel="modalCancel"><templat......
  • vue3,Nginx部署情况
    一.Vue3项目情况说明router文件夹下的index.jsimport{createRouter,createWebHashHistory}from"vue-router"constroutes=[{path:'/saoma',name:'Saoma',//redirect:'/saoma',component:()......
  • 关于layui使用弹出层模版后对应上传组件不工作的问题记录
    这里页面的聊天室是使用的弹出层:util.on('lay-on',{'open-chat-room':function(){layer.open({title:'项目聊天室',type:1,offset:&#......
  • vue3页面中,两个相同组件,一个卸载,一个挂载,后展示的组件事件监听不生效?
    场景:在实际开发中,遇到了这样一种场景,vue3页面,两个相同组件,在满足某条件下展示第一个组件,满足另一个条件下,隐藏第一个组件,同时展示第二个组件,比如反馈组件,会通过window.addEventListener来监听自定义的反馈弹窗展示和隐藏事件。结果:两个相同组件一个卸载,一个挂载,第一个组监听的......
  • 关于vue中的动态组件component和keep-alive
    component标签是vue内置的,作用:组件的占位符<componentis="组件名称"></component>其中is属性的值表示要渲染的组件的名字,也就是components节点下的组件名称当我们动态切换组件名称时,每切换一次,组件就会被销毁一次,若不想让组件被销毁,则需要用到标签keep-alive<keep-al......