vue2 系列:自定义 v-model

1. input 中的 v-model

Go 复制代码
<!-- 表单双向绑定 -->
<input :value="username" @input="username = $event.target.value" />
<!-- 等于 -->
<input v-model="username" />

2. 自定义组件 v-model

html 复制代码
<!-- 组件双向绑定 -->
<!-- 子 -->
<script>
export default {
  props: {
    value: {
      required: true,
    },
  },
  watch: {
    value(newValue) {
      this.my_input = newValue;
    },
  },
  data() {
    return {
      my_input: this.value,
    };
  },
  methods: {
    handleChange() {
      this.$emit("input", this.my_input);
    },
  },
};
</script>
<template>
  <el-input v-model="my_input" @change="handleChange"></el-input>
</template>

<!-- 父 -->
<my-component v-model="username" />
相关推荐
子兮曰1 分钟前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
瑶琴AI前端2 分钟前
【零成本高效编程】VS Code必装的5款免费AI插件,开发效率飙升!
前端·ai编程·visual studio code
forever_Mamba3 分钟前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
_AaronWong4 分钟前
实现一个鼠标滚轮横向滚动需求
前端·electron
小帆聊前端4 分钟前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰4 分钟前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
Olrookie5 分钟前
ruoyi-vue(十五)——布局设置,导航栏,侧边栏,顶部栏
前端·vue.js·笔记
召摇6 分钟前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js
光影少年7 分钟前
vite打包优化有哪些
前端·vite·掘金·金石计划
码间舞7 分钟前
文件太大怎么上传?【分组分片上传大文件】-实战记录
前端·vue.js·程序员