- 2024-04-23面试官：在原生input上面使用v-model和组件上面使用有什么区别？
前言还是上一篇面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？文章的那个粉丝，面试官接着问了他另外一个v-model的问题。面试官：vue3的v-model都用过吧，来讲讲。粉丝：v-model其实就是一个语法糖，在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一
- 2024-03-26vue3+ts项目引入富文本编辑器wangeditor
说明项目开发中，做到媒体说、资讯等模块时，会需要引入富文本编辑器，对比发现wangeditor使用群众多，并且很多问题也已经有解答。界面展示实现要点引入wangeditor配置导航栏代码<template><divstyle="border:1pxsolid#EEEFF0;border-radius:5px;overflow:hidden;wid
- 2024-03-26面试官：只知道v-model是:modelValue和@onUpdate语法糖，那你可以走了
前言我们每天都在用v-model，并且大家都知道在vue3中v-model是:modelValue和@update:modelValue的语法糖。那你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？将v-model指令转换为modelValue属性和@update:modelValue事件这一过程是在编译时还是运行
- 2024-02-20关于vue3的h函数
h(ElInput,{class:'w200ml8',placeholder:'关键字搜索',clearable:true,modelValue:formData.url_pattern,'onUpdate:modelValue':(val:string)=&
- 2023-12-11组件v-model
原理当使用在一个组件上时，v-model会被展开为如下的形式：<CustomInput:model-value="searchText"@update:model-value="newValue=>searchText=newValue"/>要让这个例子实际工作起来，<CustomInput>组件内部需要做两件事：将内部原生<input>元素的valueattribute
- 2023-11-21vue3 ts 父子 组件小例子
<project-tabref="projectTabRef"v-model="form.projectVO":data="parentToChild"@update="updateHandler"></project-tab>//引用组件constProjectTab=defineAsyncComponent(()=>import('./tabsProject.
- 2023-11-20vue3 ts 生命周期函数写法
写法1import{defineAsyncComponent,ref,reactive,onMounted,nextTick,computed,watch}from'vue';//页面加载时onMounted(()=>{ initResize();});//监听双向绑定modelValue的变化watch( ()=>props.modelValue, ()=>{ initModeValueEcho();
- 2023-10-10封装el-select
效果：给select组件传入option请求方法，父组件无需再进行其他操作 <template><el-selectv-model="selectValue"multipleclearable@change="emitChange"value-key="id"placeholder="请选择车辆"><el-optionv-for="iteminop
- 2023-08-14Vue3 中的v-model实现父子组件数据同步通信
v-model在vue2中也就是双向绑定作用，但是在vue3中除了实现双向绑定外，还可以进行组件的通信父子组件的数据同步，接下来看看例子：<template><h1>{{num}}</h1><child-eventv-model="num"></child-event></template><scriptlang="ts"setup
- 2023-08-12vue3在父子组件使用v-model双向绑定
父组件：<scriptsetup>importInputBoxfrom"@/compon/InputBox.vue";import{ref}from"vue";constcount=ref(100)</script><template><div>我是父组件,{{count}}<InputBoxv-model="count"&
- 2023-08-12vue3.3实验性新特性defineModel
子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？vue3.3新的实验性特性defineModel可以完全不写emit和props。由于是实验性特性，所以需要配置之后才能使用。修改vite.config.js：exportdefaultdefineConfig({plugins:[vue(**{script:{
- 2023-08-01vue3之父组件中封了子组件的抽屉(弹框类)，通过update:modelValue来进行父子组件的v-model="dialogVisible"通讯
eg:父组件a.vue<AddAiDrawer:projectId="route.query.id"v-model="addAiShow"title="新增"type="spaceAi"@call-back-table="refreshTa
- 2023-07-07vue - v-model在组件上的应用（包含子传父）
一、v-model的参数默认情况下，v-model在组件上都是使用modelValue作为prop，并以update:modelValue作为对应的事件。我们可以通过给v-model指定一个参数来更改这些名字：<MyComponentv-model:title="bookTitle"/>在这个例子中，子组件应声明一个titleprop，并通过触发upd
- 2023-05-12小白的一次Form组件封装分享
Form组件介绍form表单常用在回显表单信息+验证表单+提交表单信息。通常包含输入框,选择框，日期选择框，文本框等可输入的组件。封装思路通过配置文件生成一个基本的表单，然后配合数据的双向绑定得到我们提交的数据，同时尽量保留第三方UI库组件提供的属性（Attributes）、插槽（Slots）和
- 2023-05-04Vue3 h函数渲染组件
1、渲染ElSelect组件constmodulleFilters=ref([{label:1,value:2},{label:2,value:3},]);constsearch=ref('');consttableColumn=[{prop:'module',label:'模块',headerRender:()=>h(
- 2023-04-24vue3 自定义组件双向绑定（modelValue）
参考链接：https://huaweicloud.csdn.net/638edf68dacf622b8df8d152.html父组件：<Customabcref="editor"v-model="data.introduction":min-height="400"name="职能"placeholder="请编辑"/>子组件<divclass="tinymc
- 2023-03-11vue 自定义组件 实现v-model双向绑定
父组件:<childCompv-model="aaa"/><script>...data(){return{aaa:123}}...</script>自定义组件:childComp.vue<script>...props:
- 2023-03-06element-ui 表单组件的简单封装-2
form.vue<template><divclass="form"><hr/><h1>form{{formData}}</h1><el-formref="formRef":model="formData":label-width
- 2023-03-05tailwindcss_封装
/admin-one-vue-tailwind-master/index.html<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=ed
- 2023-02-16iview 踩坑 分页 Page modelValue
分页组件对应的当前页的字段不能用V-model也不能value也不能用官网文档中的modelValue，应该用current我说实话，iview是真的坑<Page@on-change="runPage"
- 2023-02-01vue3 自定义组件中使用 v-model
1、直接绑定v-model，但是Props要固定为modelValue组件D：注意这里的Props和Emits，必须使用Vue提供的defineProps()和defineEmits()。如果父组件想要使用v-mod
- 2023-01-23vue：v-model （原生组件与自定义组件）
vue2:原生组件 vue2:自定义组件 vue3:自定义组件vue3更改了vue2声明自定义组件的方式，将vue2中的value替换成了modelValue，将emit触发的事件名改为'update:model
- 2022-12-28Vue3 学习笔记
有Vue2的基础，笔记只记载之前不熟悉的知识一、Vue基本知识1.Vue3基本指令1.1v-prev-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：跳过不需要
- 2022-12-08Vue3中 v-model 语法糖运用
一、介绍在Vue2.0发布后，开发者使用v-model指令时必须使用名为value的prop。如果开发者出于不同的目的需要使用其他的prop，就不得不使用v-bind.sync。此外，由于v-mo
- 2022-12-08element-ui 表单组件的简单封装
背景在管理系统中我们需要经常使用表单组件来收集用户的一些数据，如果按照官网的示例一个个表单项去填写不仅代码会变得很长而且麻烦，所以我们有必要去对组件进行再次的封装