正常

子组件：

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. 在Python中写入文件时，权限被拒绝错误

    我想创建一个文件并在python中写一些整数数据.例如,我有一个变量abc = 3,我试图将它写入一个文件(它不存在,我假设python将自己创建): fout = open("newfil ...

  2. 新手学习 React 迷惑的点

    网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...

  3. 获取模糊匹配的div id属性

    html中有一批id,以数字+固定字符结尾,前台需要把这一批id组成数组传递给后台 假设固定结尾字符为“pic”,使用 var pidlist=$("[id$='pic']");将 ...

  4. Nginx 实现 Rewrite 跳转

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上一篇文章对Nginx的Location配置进行了讲解,本篇主要对于Nginx中的Rewrite跳转进行讲解. ...

  5. Redis缓存击穿、缓存穿透、缓存雪崩

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上篇文章谈到了Redis分布式锁,实际上就是为了解释为什么做缓存采用Redis而不使用map/guava.缓存 ...

  6. shells - 有效登录 shell 的路径名

    描述 /etc/shells 是一个文本文件,其中包含有效登录 shell 的路径全名. chsh(1) 需要参考这个文件,并且其他程序也可以查询该文件.有些程序从这个文件判断用户是不是标准用户.比如 ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. python 循环中使用多个subplot画子图像（python matplotlib use more than one subplot in loop）

    在循环语句中画出多个subplot图像代码如下 http://jonathansoma.com/lede/data-studio/classes/small-multiples/long-explan ...

  9. Android代码学习--点击事件的几种写法

    由来:常规的写法参见<写一个apk>,每次点击按钮,按钮先查找文本框等元素,然后再操作,其实查找操作是很费时的操作,因此将该定义放到Activity的onCreate中:Oncreate只 ...

  10. Hive 窗口函数

    举例: row_number() over(partition by clue_id order by state_updated desc) 业务举例: select distinct a.clue ...