使用了2种方法去封装input组件(.vue与.jsx)

代码如下

  父组件:

<template>
<div>
<h1>input组件封装</h1>
<Input v-model:val="val"></Input>
<InputJsx v-model:valJsx="valJsx"></InputJsx>
<button @click="getVal">获取input</button>
</div>
</template> <script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.jsx";
import Input from "@/components/Input.vue";
import InputJsx from "@/components/Input.jsx";
export default defineComponent({
name: "",
components: {
HelloWorld,
Input,
InputJsx,
},
setup() {
const data = reactive({});
const val = ref("测试");
const valJsx = ref("测试jsx");
const getVal = () => {
console.log("val值" + val.value);
console.log("valJsx值" + valJsx.value);
};
return {
val,
valJsx,
getVal,
...toRefs(data),
};
},
});
</script>
<style scoped lang="less"></style>

  子组件:jsx写法

import { defineComponent, ref, watch } from "vue";
import "@/style/test.less";
export default defineComponent({
props: {
valJsx: {
type: String,
default: "",
},
},
setup(props, { emit }) {
const changeVal = (event) => {
console.log(event.target.value);
emit("update:valJsx", event.target.value);
};
return (props) => {
return (
<div>
<input value={props.valJsx} onChange={changeVal} type="text" />
</div>
);
};
},
});

  子组件:vue写法

  

<template>
<div>
<input :value="val" @input="$emit('update:val', $event.target.value)" type="text" />
</div>
</template> <script lang="ts">
import { toRefs, defineComponent, watch } from "vue";
export default defineComponent({
name: "Input",
props: {
val: {
type: String,
default: "",
},
},
emits: ["update:val"],
setup(props, { emit }) {
watch(
() => props.val,
(newVal) => {
emit("update:val", newVal);
},
);
return {
...toRefs(props),
};
},
});
</script>
<style scoped lang="less"></style>

多个v-model绑定

  子组件:

<template>
<div>title: </div>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)">
<span>{{title}}</span>
<div></div>
<div>description: </div>
<input
type="text"
:value="description"
@input="$emit('update:description', $event.target.value)">
<span>{{description}}</span>
</template> <script>
export default {
props: {
title: String,
description: String
},
emits: ['update:title', 'update:description'],
}
</script>

  父组件:

<template>
<CustomInput v-model:title="title" v-model:description="description"></CustomInput>
</template> <script>
import CustomInput from '../components/CustomInput.vue' export default {
components: { CustomInput },
data() {
return {
title: '',
description: '',
}
}
}
</script>

完结:2021-09-06 17:27:02

vue3封装input组件的更多相关文章

  1. Vue3 封装第三方组件(一)做一个合格的传声筒

    各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了. 只是嘛,如果再封装一下的话,那么用起来就会更方便了. 那么如何封装呢? 封装三要素 -- 属性.插槽.事件.方 ...

  2. 从0搭建vue3组件库: Input组件

    本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...

  3. 纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

    现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...

  4. 08 - Vue3 UI Framework - Input 组件

    接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...

  5. Vue3 封装 Element Plus Menu 无限级菜单组件

    本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单. 1 数据结构定义 ...

  6. 使用shadow dom封装web组件

    什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...

  7. asp.net core封装layui组件示例分享

    用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...

  8. 封装input 逐渐,且input插件必须带有默认值。

    封装input 逐渐,且input插件必须带有默认值. 组件: <template> <div class="input-show"> <span c ...

  9. vue 封装分页组件

    分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...

  10. 自己封装js组件 - 中级中高级

    接着做关于alert组件的笔记 怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵,但是中高级也不是白叫的 这次主要是增加了widget类,增加了自己绑定的事件和触发事件的方法!这么做是为什 ...

随机推荐

  1. jar包下不下来

    1.maven中的settings.xml文件中的镜像资源配置 <mirror> <id>alimaven</id> <name>aliyun mave ...

  2. Vue中的样式作用域

    介绍对于Vue样式作用域的介绍 对于所有组件中的Css都是通用的 在未指定作用域之前 在A组件中定义的 {.h1{color:red}} 同样会在b组件中生效 如果在B组件中也定义了 h1元素. 虽然 ...

  3. MATH1851 Calculus and ordinary differential equations

    课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams 由于提前预习了 ...

  4. Java语言中的复合运算符会自动进行类型转换

    计算1/1-1/2+1/3+--+1/99-1/100 public class LoopControlExercise08{ public static void main(String[] arg ...

  5. 基于Nginx上的docker负载均衡

    1.首先需要拖拽镜像文件   docker  pull nginx 2.生成多个docker容器 docker run --name demo1 -d -p 8081:80 -v /data/demo ...

  6. M1 IntelliJ IDEA2022安装报错解决方法

    下载地址:http://pan.jizhouyun.com/s/I3QJVzk3et 报错一:系统权限问题 报错示例: 1.XX已损坏,打不开:您应该将它移到废纸娄/已损坏 2.打不开:您应该推出磁盘 ...

  7. EhLib 9安装

    EhLib 9安装 安装EhLib: 在Installer文件夹里找到EhLibInstaller.exe,右键以管理员权限运行EhLibInstaller.exe. 按照提示一路安装下来,顺利完成. ...

  8. bsub opts

    Options - IBM Documentation List of options for the bsub command. -aSpecifies one or more applicatio ...

  9. js单线程工作

    http://www.ruanyifeng.com/blog/2014/10/event-loop.html#comment-390185

  10. php redis使用 常用方法 | Windows环境下安装Redis | Windows下php安装redis扩展(详解版)

    redis可视化工具:http://www.treesoft.cn/dms.html #php redis使用 常用方法 https://www.cnblogs.com/mg007/p/1043107 ...