vue修饰符v-model及.sync原理及区别详解

目录
  • v-model的原理
  • .sync的原理
  • v-model和.sync修饰符的区别
  • 总结作用场景：

v-model的原理

  • v-model的本质,其实就是:value和@input事件的语法糖
    <!--v-model写法-->
    <my-component type="text" v-model="num">
    <!--展开语法糖后的写法-->
    <my-component type="text"
      :value="num"
      @input="(value) => num = value"
    >

父组件通过向子组件传值和自定义事件,子组件里面通过$emit去触发input事件

  • 注意点: 在子组件中 这个input事件是自定义事件
// 在子组件中
<template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('input',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

.sync的原理

// 在父组件中
    <my-component :value.sync="num" />

// 子组件中
    <template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('update:value',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

两者本质都是一样，并没有任何区别： “监听一个触发事件”="(val) => value = val"。

v-model和.sync修饰符的区别

.sync与v-model区别是

相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

区别点：

  • 格式不同。 v-model="num", :num.sync="num"
  • v-model： @input + value
  • :num.sync: @update:num
  • v-model只能用一次；.sync可以有多个。

只不过v-model默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。比较单一，不能有多个。

// 子组件可以用自定义事件，来替换v-model默认对应的原生input事件，只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},

一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

因为使用v-model,子组件中只能触发一个input事件,事件名是唯一的,而.sync修饰符,它触发的时间名是updata:属性名,所以它有多个事件名,就可以使用多次

总结作用场景：

  • props/$emit是父子组件最常用的通信方式，而v-model、.sync只是其语法糖
  • 子组件只是单一的修改某个父组件值的话，表单类组件使用v-model语法糖
  • 子组件只是单一的修改某个父组件值的话，非表单类组件使用sync语法糖
  • 复杂逻辑还是老老实实props/$emit

其实语法糖只是在父组件用的时候更加方便，而子组件该咋样还是咋样。

以上就是vue修饰符v-model及.sync原理及区别详解的详细内容，更多关于vue修饰符v-model .sync的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解VUE自定义组件中用.sync修饰符与v-model的区别

    .sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css&q

  • vue中v-model指令与.sync修饰符的区别详解

    vue中v-model指令与.sync修饰符的区别详解

    目录 v-model .sync 细微之处的区别 总结功能作用场景: v-model <!--父组件--> <template> <!--v-model 指令是语法糖--> <Child v-model="model"></Child> <!-- 把 v-model 指令展开后相当于下面的代码 --> <!-- v-model绑定的默认事件是input,默认prop是value属性 --> <Ch

  • vue中v-model和.sync修饰符的区别

    vue中v-model和.sync修饰符的区别

    目录 前言 一.v-model 1. 作用 2.v-model的本质 3. v-model的特殊用法 二..sync修饰符 1. .sync修饰符作用 2. .sync修饰符本质 总结 .sync与v-model区别是 前言 在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖.但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符.在这里就两者的使用进

  • Vue重要修饰符.sync对比v-model的区别及使用详解

    目录 Vue 中的双向绑定 Vue 中的 .syc 修饰符 .sync 使用注意事项 .sync 与 v-model的比较 Vue 中的双向绑定 上一节中我们已经讨论过Vue中并没有真正的双向绑定.Vue中的 props等数据是单向流动的,由父级至子级向下绑定的,即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值.如果在子组件中修改 props ,Vue会向你发出一个警告,且并不能通过修改子组件的数据来更改父组件的数据). 如果有需求,我们可以在父组件中,子组件的标签上声明一个

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • vue修饰符v-model及.sync原理及区别详解

    目录 v-model的原理 .sync的原理 v-model和.sync修饰符的区别 总结作用场景: v-model的原理 v-model的本质,其实就是:value和@input事件的语法糖 <!--v-model写法--> <my-component type="text" v-model="num"> <!--展开语法糖后的写法--> <my-component type="text" :value

  • Vue实例中生命周期created和mounted的区别详解

    Vue实例中生命周期created和mounted的区别详解

    前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注

  • 面试最常问的13种Vue修饰符

    目录 1.lazy 2.trim 3.number 4.stop 5.capture 6.self 7.once 8.prevent 9.native 10.left,right,middle 11.passive 12.camel 12.sync 13.keyCode 1.lazy lazy修饰符作用是,改变输入框的值时value不会改变,当光标离开输入框时,v-model绑定的值value才会改变 <input type="text" v-model.lazy="v

  • Vue响应式原理的示例详解

    Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v

  • Java8默认方法Default Methods原理及实例详解

    这篇文章主要介绍了Java8默认方法Default Methods原理及实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Java 8 引入了新的语言特性--默认方法(Default Methods). Default methods enable new functionality to be added to the interfaces of libraries and ensure binary compatibility wit

  • Java异或技操作给任意的文件加密原理及使用详解

    异或简单介绍:异或是一种基于二进制的位运算,用符号XOR或者 ^ 表示,其运算法则是对运算符两侧数的每一个二进制位,同值取0,异值取1. 简单理解就是不进位加法,如1+1=0,,0+0=0,1+0=1. 需求描述 在信息化时代对数据进行加密是一个很重要的主题,在做项目的过程中,我也实现了一个比较复杂的加密算法,但是由于涉及到的技术是保密的,所以在这里我实现一个比较简单的版本,利用文件的输入输出流和异或操作进行任意文件的加密,关于解密算法,很简单,自己思考下就能解决. 数学原理 该加密算法利用的是

  • Vue使用枚举类型实现HTML下拉框步骤详解

    Vue使用枚举类型实现HTML下拉框步骤详解

    下拉框包含option中的Value和用来显示的选项, 一般后台都是使用的Value值,而不是显示在前台的选项 第一步: 编写下拉框需要的枚举类型 StatusEnum.java public enum StatusEnum { RED, YELLOW, GREEN } 第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项 StatusDTO.java public class StatusDTO { private String code; private String

  • vue watch监听对象及对应值的变化详解

    如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • Docker核心原理之 Cgroup详解

    Docker核心原理之 Cgroup详解

    内核中强大的工具cgroup,不仅可以限制被NameSpace隔离起来的资源,还可以为资源设置权重,计算用量等 什么是cgroup cgroup全称是control groups control groups:控制组,被整合在了linux内核当中,把进程(tasks)放到组里面,对组设置权限,对进程进行控制.可以理解为用户和组的概念,用户会继承它所在组的权限. cgroups是linux内核中的机制,这种机制可以根据特定的行为把一系列的任务,子任务整合或者分离,按照资源划分的等级的不同,从而实现

随机推荐