首页 > 其他分享 >vue tsx功能测试,包含v-model 实现,slot实现,数据响应注意点

vue tsx功能测试,包含v-model 实现,slot实现,数据响应注意点

时间:2024-09-26 20:49:55浏览次数:9  
标签:slot vue console log value 功能测试 props model data1

  • child.tsx
import { defineComponent } from 'vue';


// 响应式数据需要放在函数外面,或者放在setup里面
const data1 = ref(123);

function myComponent() {
    const data2 = ref(34); // 在这里定义ref 无法响应式

    function data2ClickHanlder() {
        data2.value++;
        console.log(data2.value); // 35
        // other logic here...
    }

    function data1ClickHanlder() {
        data1.value++;
        console.log(data1.value); // 124
        // other logic here...
    }
    return (
        <>
            <div>sklfjsvnsldfjsd</div>

            <div>{data1.value}</div>
            <div>{data2.value}</div>
            <button onClick={() => data2ClickHanlder()}>sdf</button>
            <button onClick={() => data1ClickHanlder()}>dsksf</button>
        </>
    );
}

export default defineComponent({
    props: {
        modelValue: {
            type: [Number, String],
            default: 0,
            required: true
        }
    },
    emits: {
        'update:model-value': (val) => true
    },
    // setup 第一个参数是props,第二个参数是类似this的参数,可以获取到各种,包括emit,slots等
    setup(props, self) {
        const { emit, slots } = self;
        console.log(props, 'props');
        console.log(self, 'self');

        function clickHandler() {
            data1.value++;
            console.log(data1.value); // 124
            // other logic here...
        }

        function emitInput(e) {
            console.log(e?.target.value); // 34
            self.emit('update:model-value', e?.target.value);
        }

        const arr = [234, 34234];

        return (props) => {
            console.log(props, 'clickHandler');
            return (
                <>
                    {myComponent()}

                    <div>{data1.value}</div>

                    <button onClick={() => clickHandler()}>btn</button>

                    <div>
                        <input type="text" value={props.modelValue} onInput={(e) => emit('update:model-value', e?.target.value)} />
                    </div>

                    <div>{slots.default?.()}</div>
                    <div>{arr?.[0]}</div>
                </>
            );
        };
    }
});
  • 父组件
<template>
  <div class='box'>
    demo
    <child v-model="myInputValue">
      <template #default>
        slot 测试
      </template>
    </child>

    {{ myInputValue }}
  </div>
</template>
<script lang='ts' setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';

import child from './components/child';

const myInputValue = ref()

watch(myInputValue, (val) => {
  console.log(val, "myInputValue")
})

</script>
<style lang='scss' scoped></style>

总结

  • setup 第一个参数是props,第二个参数是类似this的参数,可以获取到各种,包括emit,slots等
  • 响应式数据需要放在函数外面,或者放在setup里面
  • modelValue 实现v-model数据接收,update:model-value实现数据外传

标签:slot,vue,console,log,value,功能测试,props,model,data1
From: https://www.cnblogs.com/jocongmin/p/18434322

相关文章

  • 如何打造流浪天使乐园管理系统?Java SpringBoot+Vue技术解析
    ✍✍计算机毕业编程指导师**⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流!⚡⚡Java、Python、小程序、大数据实战项目集⚡⚡文末获取......
  • 掌握 Vuejs:“从查询中检索对象参数”项目
    深入vue.js的世界并学习如何解决vue-router库中具有挑战性的错误。这个项目名为“从查询中检索对象参数”,是一次全面的实践体验,不仅可以增强您的vue.js技能,还可以提高您解决问题和调试的能力。在这个项目中,您将踏上修复将对象推送到查询参数时导致问题的错误的旅程。通过逐......
  • 基于nodejs+vue校园新闻网站[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,互联网已成为人们获取信息、交流思想的重要平台。在高校环境中,信息的及时传播与共享对于促进学术交流、增强校园文化氛围、提升学生......
  • 基于nodejs+vue校园新闻网站[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和互联网的普及,校园信息化建设已成为提升教育质量、促进校园文化交流的重要途径。在当前数字化时代背景下,校园新闻作为连接师生、传......
  • 基于nodejs+vue校园学生会管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在当今数字化、信息化高速发展的时代,校园管理正逐步向智能化、高效化转型。学生会作为连接学校与学生之间的重要桥梁,其管理效率与服务质量直接影响到学生活......
  • 基于Spring Boot+Vue+MySQL的高校竞赛管理系统
    目录前言 一、技术栈二、系统功能介绍三、核心代码1、登录模块 2、文件上传模块3、代码封装前言高校竞赛管理,其工作流程繁杂、多样、管理复杂与设备维护繁琐。而计算机已完全能够胜任高校竞赛管理工作,而且更加准确、方便、快捷、高效、清晰、透明,它完全可以克服......
  • java+vue计算机毕设毕业设计过程化管理系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育规模的不断扩大和教育信息化进程的加速,毕业设计作为培养学生实践能力、创新能力和综合素质的重要环节,其管理过程日益复杂。传统的手工或......
  • java+vue计算机毕设毕业生实习管理系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育规模的扩大与教育改革的深入,毕业生实习作为连接理论知识与实际操作的重要桥梁,其重要性日益凸显。然而,传统实习管理方式多依赖于纸质文档......
  • java+vue计算机毕设班级疫情管理系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在全球化日益加深的今天,疫情的快速传播对教育体系构成了前所未有的挑战。传统的班级管理模式在面对突发疫情时显得力不从心,信息传达不及时、健康监测......
  • vue 使用LivePlayer H5播放器播放m3u8格式视频
    一、官方网址 https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8二、安装依赖npminstall@liveqing/liveplayer三、复制依赖文件在node_modules下找到这三个文件将他们复制到public文件夹下四、在index.html中引入liveplayer-li......