场景:  

  在用vue开发的过程中我们经常会遇到父子组件共用同一变量的情况,那么在这种情况下,我们肯定会想直接 把变量传过来用,因为是双向绑定的所以子组件就会修改这个变量,这样在vue中时会报错的。

  问题:  

  对于这种问题,我们就可以在父组件中用v-model或者是用一个属性加上sync修饰符并在子组件使用$emit('input',v)或者$emit('x:update',v)来解决,但是这两个东西到底有什么区别呢?

  结论:  

  个人认为两者只是语法上的区别,以此来实现两个组件之间数据的双向绑定,sync更加灵活一点,如果是v-model的话在子组件就只能用value来接这个参数了,而sync可随意

  延伸:  

  官方有哦说道:组件实例的作用域是独立的,这意味着不能(也不该)在子组件的模板内引用父组件的数据,父组件的数据需要通多prop才能下发到子组件中。

v-model和sync修饰符的更多相关文章

  1. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  3. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  4. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  5. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...

  6. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  7. 深入理解.sync修饰符

    原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...

  8. [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”

    一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...

  9. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

随机推荐

  1. flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array

    mkdir /data/UnifiedLog/; cd /data/UnifiedLog/; wget http://mirror.bit.edu.cn/apache/flume/1.8.0/apac ...

  2. Java 之反射机制

    java 语言的反射机制 - 在运行状态中,对于任意一个类 (class 文件),都能够知道这个类的所有属性和方法; - 能动态获取类中的信息,也可以理解为对类(字节码文件)的解剖 描述字节码文件的类 ...

  3. 【转】如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源

    网上看到关于微信官方的跨平台跨业务的终端基础组件Mars的介绍文章,转载这这里.源代码: https://github.com/Tencent/mars作者:男人链接:https://zhuanlan ...

  4. 查找至少连续出现三次的所有数字/连续3天的日期【LeetCode】

    编写一个SQL查询,查找至少连续出现三次的所有数字.+----+-----+ | Id | Num | +----+-----+ | 1 | 1 | | 2 | 1 | | 3 | 1 | | 4 | ...

  5. java 程序cpu100%问题

    找到java应用进程 ID即 java_id 找到该 java_id对应的CPU占用比较大的线程 ID即 thread_id 使用jdk自带jstack工具打印跟该线程相关的堆栈信息 [root@pv ...

  6. 35个例子学会find

    find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> - <指定目录>: 所要搜索的目录及其所有子目录.默认为当前目录. - ...

  7. pandas(八)重塑和轴向旋转

    重塑层次化索引 层次化索引为DataFrame的重排提供了良好的一致性操作,主要方法有 stack :将数据的列旋转为行 unstack:将数据的行转换为列 用一个dataframe对象举例 In [ ...

  8. begoo——对象的CRUD操作

    如果已知主键的值,那么可以使用这些方法进行CRUD操作 对object操作的四个方法Read/Insert/Update/Delete o := orm.NewOrm() user := new(Us ...

  9. Python(变量、数据类型)

    常量:python中没有常量,只能通过名字特征来提示例如:全部大写,如 : OLDBOY_AGE=57 一.变量 变量声明变量#!/usr/bin/env python age=18gender1=' ...

  10. Django基础(ORM)

    数据库与ORM 数据库的配置 1    django默认支持sqlite,mysql, oracle,postgresql数据库.  <1> sqlite django默认使用sqlite ...