momo's Blog.

在Elementui el-input中实现自定义 v-model

Vue ElementUi
字数统计: 124阅读时长: 1 min
2021/07/13 Share

实现方式

组件外先通过v-model绑定, 

1
<TopButtonGroup v-model="searchData" />

实际上等价于:

1
<TopButtonGroup v-bind:value="searchData" v-on:input="searchData = $event.target.value"  />

实际上底层是绑定了组件的value, 以及监听的 input事件, 通过接收事件来实时的更新数据

组件内写法

1
2
3
4
5
6
7
8
<el-input placeholder="请输入内容" :value="value" @input="$emit('input', $event)" />


export default {
  name: 'TopButtonGroup',
  // eslint-disable-next-line
  props: ['value']
}

参考文档

原文作者：Momo

原文链接：https://mo.xmomo521.top/2021/07/13/在Elementui-el-input中实现自定义-v-model/

发表日期：July 13th 2021, 3:12:33 pm

更新日期：December 21st 2021, 3:32:58 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 实现方式
  2. 2. 参考文档
Total : 133
2024
2023
2022
2021
2020
2019
Terraform CD TLS cfssl Python django drf JWT kubernetes CA 安全 Kibana JS Vue Devops Jenkins Gitlab DevOps Linux swarm pod ipvs ca k8s CPU CFS Linux时区 CST monitor PromQL Ajax logging Channels 聊天室 RPC Docker 学习笔记 Thanos Process ansible cryptography docker django-rest-framework Git 流程图 js 前端 Kubernetes prometheus-operator logstash filebeat Prometheus-operator eslint network axios vue cd xterm Docker网络 Prom联邦集群 secret CI ElementUi backup acme.sh Vuex Daemonset Taints log 动态路由 Swarm 软路由 标准运维 蓝鲸智云 ElementUI 监控 nginx ERROR
Ansible Atlantis Argocd Cloud-init Alpine Django CA Go etcd Elasticsearch Helm 日志 前端 Jenkins Kubernetes Jsonnet Docker kubernetes Linux Nginx NAS Grafana PostgreSQL Prometheus Python TerraForm Redis Terraform python alertmanager alpine docker Git gitlab-runner k3s ELK Mysql SSH vscode calico Python/Django LVM mysql Mongo TLS logging myself 蓝鲸 OpenWrt 源码分析 TCPDUMP Chrome Containerd iptables 技巧 nginx