首页 > 其他分享 >vue-让你的组件支持v-model

vue-让你的组件支持v-model

时间:2023-08-02 15:26:28浏览次数:37  
标签:vue 定义 组件 model foo 属性

原文:https://zhuanlan.zhihu.com/p/453112282

  在定义vue组件时,可以提供一个model属性,用来定义组件以何种方式支持v-model。model本身是有默认值的,如下:

  

  也就是说,如果你不定义model属性,或者按照上面的方式定义model属性,当其他人使用你的自定义组件时,v-model='foo',就等同于 :value="foo" 加上 @input ="foo =$event"。

  让我们看一个例子:

  

  然后我们在父组件中使用:

  

  看下效果

  

  你的组件就支持v-model了。

 

标签:vue,定义,组件,model,foo,属性
From: https://www.cnblogs.com/AliceMa/p/17600748.html

相关文章

  • VUE后台管理系统(二)
    SPU管理先搞定静态组件(类似Attr管理的页面结构)###product.Spu.index.vue<template><div><!--三级联动结构(全局组件)--><el-cardstyle="margin:20px0px;"><!--传值show过去--><CategorySelect@getCategoryId="getCate......
  • 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoide
    解决Vue重复点击相同路由,出现Uncaught(inpromise)NavigationDuplicated:Avoidedredundantnavigation问题问题问题描述:重复点击导航时,控制台出现报错,虽然不影响功能使用,但也不能视而不见。解决方案方案一:只需在router文件夹下,添加如下代码。constrouter=new......
  • ArkUI 组件基础 指南
    ArkTs基础指南常用组件组件组件是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。基础组件Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider......
  • web组件
    web示例API加载在线网页Web组件的使用非常简单,只需要在Page目录下的ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,controller为组件的控制器,通过controller绑定Web组件,用于实现对Web组件的控制。//xxx.ets@Entry@ComponentstructWebCo......
  • win 11 无法安装ensp 组件VBox(版本过老)导致AR路由器报错 40,关闭win11 内存完整性 开关
        解决办法如下:1、先关闭内存完整性 2、重新安装vbox(成功) 3、启动ensp(无40报错) ......
  • vue打开新窗口的两种方式
    1.使用路由跳转,绑定target="_blank"<router-linktarget="_blank":to="{path:'/pdf/download',params:{id:'8'}}"><el-buttontype="primary">ClicktodownloadPDF......
  • vue 获取当月第一天日期和最后一天日期
    //获取当月第一天数据getCurrentMonthFirst(){letdate=newDate()date.setDate(1)letmonth=parseInt(date.getMonth()+1)letday=date.getDate()if(month<10)month='0'+monthif(day<10)da......
  • vite+vue3+ts+elementPlus前端框架搭建 [一]
    记录下搭建vite+vue3+ts+elementPlus项目的过程及遇到的问题。建议使用pnpm安装依赖,npm切换到pnpm链接地址:[https://www.pnpm.cn/installation]() 1.运行环境node-vv18.17.0npm-v9.8.12.使用pnpm创建vite项目及安装依赖npminitvite-apppnpmcreate......
  • 【.NET6 + Vue3 + CentOS7.9 + Docker + Docker-Compose + SSL】个人博客前后端运维部
    个人博客前端:https://lujiesheng.cn个人博客后端:https://api.lujiesheng.cn个人博客运维:https://portainer.lujiesheng.cn1.服务器准备我采用的是腾讯云轻量应用服务器(2C4G8M80G),配置如下图:安装镜像选择CentOS7.664bit:2.服务器防火墙设置添加防火墙出入站规则......
  • vue 防连点
    directives:{preventReClick:{inserted:function(el,binding){el.addEventListener('click',(e)=>{if(!el.disabled){el.style.pointerEvents='none'setTimeout(()=>{......