正常

子组件：

this.$emit('update:title', newTitle)

父组件：

<text-document

  v-bind:title="doc.title"

  v-on:update:title="doc.title = $event"

></text-document>

简洁：

<text-document v-bind:title.sync="doc.title"></text-document>

适用于：

简单数据结构场景，子组件修改父组件的值场景模拟双向绑定（扩展v-modol基于inPut的双向绑定）。

　　

.sync 修饰符的理解的更多相关文章

  1. 深入理解.sync修饰符

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

  2. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  3. vue中.sync 修饰符

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

  4. vue 之 .sync 修饰符

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

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

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

  6. Vue sync修饰符的使用

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

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

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

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

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

  9. v-model和sync修饰符

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

随机推荐

  1. java虚拟机规范(se8)——java虚拟机的编译(四)

    3.12 抛出和处理异常 在程序中使用throw关键字来抛出异常.编译结果很简单. void cantBeZero(int i) throws TestExc { if (i == 0) { thro ...

  2. React-Native初识-安卓篇（一）

    前言:React-Native简称RN,可以用来构建Android和IOS的应用程序,在接下来的两个半月里,我会记录下本人在学习RN开发项目中的点滴. 本篇目录: 1.React-Native初识 2 ...

  3. 42th-2

    '''   1, 元祖(2,3)'''def summ2(self, *args):    '''这是一个求一系列数平方和的函数'''    s = 0    for i in args:  #历遍元 ...

  4. css3 实现可以中英切换的导航条

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. bootStrap @media 用法

    一. @media 格式 @media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) ...

  6. Python内置数学函数

    class NumString: def __init__(self, value): self.value = str(value) def __str__(self): return self.v ...

  7. PHP getcwd() 函数

    获取当前工作目录: <?phpecho getcwd()?> 结果: /home/php 定义和用法 getchwd() 函数返回当前工作目录. 语法 getcwd(); 技术细节 返回值 ...

  8. 微信jssdk安卓机分享QQ好友和QQ空间出现{"errMsg":"shareQQ:fail"}

    使用ajax请求appid之类的配置,然后进行wx.config和wx.ready,苹果机上是完全OK的,但是安卓机上十次有九次是失败,只有一次能成功,百度了一下,有人说是参数有空格,有人说是微信bu ...

  9. AcWing 226. 233矩阵 （矩阵快速幂+线性递推）打卡

    题目:https://www.acwing.com/problem/content/228/ 题意:有一个二维矩阵,这里只给你第一行和第一列,要你求出f[n][m],关系式有    1,  f[0][ ...

  10. SAS创建和使用索引（SAS INDEX)

    一.概述 在合并数据集的时候,可以使用DATA步,但使用DATA 步时需要对KEY VALUE 排序,且KEY VALUE 的名字也必须一致:也可以用PROC SQL ,不需要进行上述排序.重命名的步 ...