使用了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. python批量将png图片转换为jpg图片

    参考引用链接如下:https://www.freesion.com/article/1866518882

  2. HJ77 火车进站

    描述 给定一个正整数N代表火车数量,0<N<10,接下来输入火车入站的序列,一共N辆火车,每辆火车以数字1-9编号,火车站只有一个方向进出,同时停靠在火车站的列车中,只有后进站的出站了,先 ...

  3. 读取excel等文件根据注解自动装填为实体类

    问题:以前每次读取excel 都是根据第几列来装填实体类里面的属性.写起来很麻烦.还要判断. 思路: 1.因为每次读取excel 或者word表格 都能得到是第几列的数据,那么可以知道每列数据的ind ...

  4. csdn 复制

    $("#content_views pre").css("user-select","text"); $("#content_vi ...

  5. boost.python编辑,以及c++api的python封装

    boost.python 编辑与踩坑 踩坑1.编辑的版本使用的vs版本不同的话,使用的命令不同 2.编辑第一条命令b2 toolset=msvc-11.0 --with-python报错:fatal ...

  6. Android Studio Gradle 输出信息乱码

    Android Studio Gradle 输出信息出现乱码 如下: > Task :app:compileDebugJavaWithJavacע: ijЩ�����ļ�ʹ�û����ѹ�ʱ�� ...

  7. (原创)odoo14下qweb模板的前端与后端语法区别

    1.后端(qweb打包) 后端使用t-inherit 指定继承的模板,使用t-inherit-mode 指定继承的模式,使用xpath定位标记,使用position指定扩展位置. 2.前端 前端仍旧使 ...

  8. mysql 的 json 类型

    MySQL的 json 数据类型 MySQL5.7 后的版本,添加了对于 json 类型的支持.此前,json 类型的数据,只能在代码层面做 json.loads() 和 json.dumps() 操 ...

  9. go 的 wire 依赖注入

    首先安装 wire 工具 go install github.com/google/wire/cmd/wire@latest go 文件 package main import ( "fmt ...

  10. Mybatis二级缓存(1)