您现在的位置是:首页 > 正文

Vue2 子组件绑定 v-model ,实现父子组件通信

2024-01-30 20:32:06阅读 0

前言

v-model 可以在组件上使用以实现双向绑定。

首先让我们回忆一下 v-model 在原生元素上的用法:

<input v-model="firstName" />

在代码背后,模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段:

<input
  :value="firstName"
  @input="firstName = $event.target.value"
/>

默认用法

父组件

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <UserName
      :firstName="first"
      :lastName="last"
      @update:firstName="func1"
      @update:lastName="func2"
    />
  </div>
</template>

<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
    // 默认用法
    func1(val) {
      this.first = val;
    },
    func2(val) {
      this.last = val;
    },
  },
};
</script>

子组件

<template>
  <div>
    <input v-model="first" type="text" @input="input1" />
    <input v-model="last" type="text" @input="input2" />
  </div>
</template>

<script>
export default {
  name: "UserName",
  props: ["firstName", "lastName"],

  data() {
    return {
      first: this.firstName,
      last: this.lastName,
    };
  },
  methods: {
    input1() {
      this.$emit("update:firstName", this.first);
    },
    input2() {
      this.$emit("update:lastName", this.last);
    },
  },
};
</script>

以上就可以实现 父子组件的双向绑定



.sync写法

传参的时候加上 .sync 会简化上面的写法,父组件不需要定义更新触发函数(update)

 <UserName :firstName.sync="first" />

会被扩展为:

<UserName :firstName="first" @update:firstName="val => first = val"></UserName>

当子组件需要更新 firstName 的值时,它需要显式地触发一个更新事件:

this.$emit('update:firstName', newValue)

父组件

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <UserName :firstName.sync="first" :lastName.sync="last" />
  </div>
</template>

<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },

  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
   
  },
};
</script>

子组件

<template>
  <div>
    <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
    <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
  </div>
</template>

<script>
export default {
  name: "UserName",
  components: {},
  props: ["firstName", "lastName"],
  data() {
    return {};
  },
  methods: {},
};
</script>

以上也可以实现 父子组件的双向绑定



绑定单个 v-model

当使用在一个组件上时,v-model 会被展开为如下的形式:

 <UserName v-model="first"  />
 <!-- 上面等同于下面的写法 -->
<UserName
  :modelValue="first"
  @input="first= $event.target.value"
/>

父组件

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <UserName v-model="first"  />
  </div>
</template>

<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },

  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
    
  },
};
</script>

子组件

<template>
  <div>
    <input
      type="text"
      :value="firstName"
      @input="$emit('update', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "UserName",
  components: {},
  props: ["firstName"],
  model: {
    prop: "firstName",
    event: "update",
  },

  data() {
    return {};
  },
};
</script>

现在可以实现单个 输入框绑定



文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一 回复

文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长

网站文章

  • Redis入门

    Redis入门

    内存的key-value结构数据库。Redis 是互联网技术领域使用最为广泛的存储中间件。RedisRedis中文网key-value结构存储:基于内存存储,读写性能高适合存储热点数据(热点商品、资讯...

    2024-01-30 20:31:59
  • 查看网络计算机端口,怎么查网络端口被占用?如何查看某个端口被谁占用

    查看网络计算机端口,怎么查网络端口被占用?如何查看某个端口被谁占用

    大家在使用电脑时应该都遇到过其中某一个项目是端口被其他服务占用,导致启动失败的情况,那如何查看某个端口被谁占用呢?有一些小伙伴可能不是很清楚,所以今天本文为大家整理的就是查看某个端口被谁占用的具体方...

    2024-01-30 20:31:54
  • element 列表自定义序号

    element 列表自定义序号。

    2024-01-30 20:31:24
  • 【ES6基础】Map与WeakMap

    ES6里除了增加了Set(集合类型)外(笔者在这篇文章《Set与WeakSet》有过介绍),今天这篇文章将介绍引入的新类型——Map(映射类型)及WeakMap。映射类型在计算机科学中定义属于关联数组...

    2024-01-30 20:31:06
  • 广义表之树的兄弟孩子表示法

    title: 广义表之树的兄弟孩子表示法 date: 2020-11-17 15:55:55 tags: 兄弟孩子广义表 二叉树 categories: 数据结构 用兄弟孩子广义表来表示二叉树 对比 ...

    2024-01-30 20:30:59
  • MySQL~Undo日志(作用、存储结构、生命周期/运行过程)

    MySQL~Undo日志(作用、存储结构、生命周期/运行过程)

    文章目录Undo日志作用存储结构生命周期/运行过程Undo日志Undo日志保证了事务原子性每次更新一条数据之前都会先写入一条undo日志在运行过程中,如果数据库宕机或是事务回滚,都需要把数据恢复成原来...

    2024-01-30 20:30:21
  • Linux中的Shell编程

    Linux中的Shell编程

    Shell 是一个命令解释器,它为用户提供了一个向 Linux 内核发送请求以便运行程序界面系统级程序,用户可以用 Shell 来启动、挂起、停止甚至是编写一些程序。2.对于JavaEE和Python...

    2024-01-30 20:30:15
  • 批量重命名文件、图片、去除文件名括号

    批量重命名文件、图片、去除文件名括号

    批量重命名文件、图片、去除文件名括号

    2024-01-30 20:30:10
  • Google面试问题指南:使用Python删除重复出现的字符

    Google面试问题指南:使用Python删除重复出现的字符

    来源 | 愿码(ChainDesk.CN)内容编辑愿码Slogan | 连接每个程序员的故事网站 | http://chaindesk.cn愿码愿景 | 打造全学科IT系统免费课程,助力小白用户、初级工程师0成本免费系统学习、低成本进阶,帮助BAT一线资深工程师成长并利用自身优势创造睡后收入。官方公众号 | 愿码 | 愿码服务号 | 区块链部落免费加入愿码全思维工程师社群 | 任一...

    2024-01-30 20:29:35
  • 装饰者模式

    装饰者模式

    设计模式:专门为解决某一类问题,而编写的固定格式的代码。装饰者模式一、职责1、动态的为一个对象增加新的功能2、装饰模式是一种用于替代继承的技术,无需通过继承增加子类就能扩展对象的新功能。使用对象的关联关系代替继承关系,更加灵活,同时避免类型体系的快速膨胀。二、实现细节1、Component抽象构件角色:真实对象和装饰对象有相同的接口。这样,客户端对象就能够以与真实...

    2024-01-30 20:29:29