首页 > 其他分享 >vue3 ts 父子 组件小例子

vue3 ts 父子 组件小例子

时间:2023-11-21 11:22:51浏览次数:42  
标签:const log ref props ts vue3 组件 console modelValue

<project-tab ref="projectTabRef" v-model="form.projectVO" :data="parentToChild" @update="updateHandler"></project-tab>

//引用组件
const ProjectTab = defineAsyncComponent(() => import('./tabsProject.vue'));
const projectTabRef = ref();

const updateHandler = (param) => {
    console.log("项目保存回调")
   console.log(param)
}

const parentToChild = reactive({
    typeName: "公司立项申请",
    tableName: "company_launch",
    tablePkColumnName: "task_id",
})
    <div style="overflow:auto;">
        <el-form ref="tabProjectRef" :model="state.childModelValue" :rules="tabProRules" label-width="100px" v-loading="loading">
            <el-form-item label="项目名称" prop="state.childModelValue.projectName">
                <el-input v-model="state.childModelValue.projectName" placeholder="请输入项目名称"/>
            </el-form-item>
            <el-form-item label="联系人" >
              <el-input  placeholder="请输入联系人"/>
          </el-form-item>
</el-form>
        <el-button @click="btntabsProSee">查看</el-button>
    </div>
</template>

<script setup lang="ts">

import {watch} from "vue";

const tabProjectRef = ref();
const visible = ref(false)
const loading = ref(false)


// 定义校验规则
const tabProRules = ref({
    // directorName: [{ required: true, message: '请填写负责人', trigger: 'blur' }],
    // projectVO: {
    //     projectName:[{ required: true, message: '申请项目不能为空', trigger: 'blur' }]
    // },
})

const emit = defineEmits(['update:modelValue','other']);

const props = defineProps({
    modelValue:{type: Object} ,//[String, Array],
    data: {
        type: Object,
    },
});

const state = reactive({childModelValue: props.modelValue});

const btntabsProSee = ()=>{
    // emit("other",{hle:"我回来了",hll1:1})
    // emit("update:modelValue",state)
    // console.log(props.data)
    // console.log(props.modelValue)
    console.log(state)
}
// 监听双向绑定值改变,用于回显
watch(
    () => props.modelValue,
    (val) => {
        state.childModelValue= val;
    },
    {
        deep: true,
    }
);
</script>

标签:const,log,ref,props,ts,vue3,组件,console,modelValue
From: https://www.cnblogs.com/linhan8888/p/17846192.html

相关文章

  • 界面控件DevExpress WPF流程图组件,完美复制Visio UI!(一)
    DevExpressWPFDiagram(流程图)控件帮助用户完美复制MicrosoftVisioUI,并将信息丰富且组织良好的图表、流程图和组织图轻松合并到您的下一个WPF项目中。P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着......
  • 解放VSCode+Vue的完整组件库智能提示(包括ant-design-vue、element-plus等)
    解放VSCode+Vue的完整组件库智能提示最近因为一些原因从WebStrom转回VSCode,首先感受到的就是组件库没有智能提示了:这能忍吗?根本不可能!接下来,我带你花三分钟找回遗失的智能提示~首先,本篇文章适用于通过unplugin-vue-components自动引入组件的项目;也就是说,在你的vite.config.js......
  • vue3路由重定向失效
    页面刷新时遇到路由重定向无效的问题,可能是因为路由重定向是在客户端进行的,而页面刷新会重新加载整个应用程序,导致重定向逻辑丢失。为了解决这个问题,你可以使用服务器端的重定向来确保在页面刷新时也能正确地重定向到指定的路由。以下是一种常见的解决方案:在服务器端配置,确保......
  • ARC144E GCD of Path Weights
    Description给定\(n\)个点,\(m\)条边的有向图,图中的任意一条有向边满足边起点的编号小于边终点的编号。每个点有点权,但其中有些点的点权未知。你需要找到一种给未知点权值的方案,使得所有\(1\ton\)的路径点权和的最大公因数最大,或者告知答案可以无限大。输出这个最大值。......
  • vue3_Extraneous non-props attributes (class) were passed to component but could
    今天的开发中发现了这个问题Extraneousnon-propsattributes(class)werepassedtocomponentbutcouldnotbeautomaticallyinheritedbecausecomponentrendersfragmentortextrootnodes.原因:是因为vue3中允许在<template>中不设置根节点,所以我在某个页面中......
  • cenots7使用GPG加密文件
    1、安装gpgyum-yinstallgnupg2、生成密钥对gpg--gen-key中文翻译后输入如下:请选择您要使用的密钥种类:(1)RSAandRSA(default)(2)DSAandElgamal(3)DSA(仅用于签名)(4)RSA(仅用于签名)您的选择?1RSA密钥长度应在1024位与4096位之间。您想要......
  • 第六章、Vue3高级
    目录二十四、项目实战细节(二)1、组件设置name属性二十四、项目实战细节(二)1、组件设置name属性<scriptsetup>//Vue3.3后支持defineOptions({name:'组件名',inheritAttrs:false})</script>......
  • RTaW-Pegase构建可预测QoS的TSN网络架构
    ​1.设计下一代面向服务的E/E架构 1.设计下一代面向服务的E/E架构当今汽车上多达数以百计的ECU(电子控制单元),MCU(微控制处理器单元)及其上面运行着的大量的嵌入式软件代码,以及复杂的CAN、LIN、FlexRay等整车通讯网络决定了汽车不同于其他的IOT设备或智能手机。汽车上的电子电气架......
  • TSN流量记录器:验证汽车网络中的以太网聚合,经济高效的解决方案
     在未来几年,汽车线束将从不同协议的异质网络转变为分层的同质以太网网络。在这种新情况下,模拟真实车辆网络的实验室测试台需要分析工具,以支持它们在车内通信过程中进行验证。汽车向以太网聚合原因随着汽车内部技术变得越来越复杂,相互间的联系变得越来越紧密,最新的应用程序和......
  • 旋极携手西班牙SoC-e公司,为中国客户提供高效可靠TSN通讯解决方案
    2023年2月,旋极信息与西班牙SoC-e公司正式签订战略合作协议,成为其在中国区重要合作伙伴。SoC-e是一家世界领先的基于FPGA技术的以太网通讯解决方案供应商,是一系列IP核开发领域的先锋,为关键任务实施网络化、同步性和安全性提供技术支撑。公司具有业内完整、灵活和有效的TSN解决方案......