这个关键字在v2.3.0+ 新增,注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。说白了他就是子组件改变父组件DATA的一种方法,但是个人觉得要慎用吧,不然有容易污染组件数据的隐患,

可以运行一下示例代码,参考vue  dev  tool ,就会明白

father.vue:

<template>
<div class="hello"> //input实时改变wrd的值, 并且会实时改变box里的内容
<input type="text" v-model="wrd">
<hr>
这是name---{{sname}}
<!-- 不写sync不更新父组件数据,变成了单向的父组件传值给子组件的写法 -->
<box :word.sync="wrd" :sname.sync="sname" ></box>
</div>
</template> <script>
import box from './child.vue' //引入box子组件
export default {
name: 'HelloWorld',
data() {
return {
wrd: '',
sname:'zs',
age:12
}
},
components: {
box
}
}
</script>

child.vue

<template>
<div class="hello">
<div class="ipt">
<hr>
---------------------------------------------
<br>
<input type="text" v-model="str">
</div> //word是父元素传过来的
<br>
<h2>{{ word }}</h2>
<br>
//sname也是
<br>
<h2>{{ sname }}</h2>
</div>
</template> <script>
export default {
name: 'box',
data() {
return {
str: '',
}
},
props: {
word: {
type:String,
default:''
},
sname:{
type:String,
default:'ls'
}
},
watch: {
str: function(newValue, oldValue) {
//每当str的值改变则发送事件update:sname , 并且把值传过去,这时会修改父组件的data值
this.$emit('update:sname', newValue);
//如果多个值又不想用object,可以多次emit
this.$emit('update:word', newValue+'1');
}
}
}
</script>
  

vue 的sync用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  3. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  4. Vue中.sync修饰符

    Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...

  5. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  6. vue sync用法

    1.父组件 <add-rule :show.sync="showEditDialog" :addOrUpdate="addOrUpdate" @close ...

  7. vue中.sync 修饰符

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

  8. Vue SSR: 基本用法 (二)

    上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...

  9. vue 之 .sync 修饰符

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

随机推荐

  1. RabbitMq学习2-php命令行模式测试rabbitmq

    一.RabbitMQ结构 1.几个概念说明:       Broker:简单来说就是消息队列服务器实体. Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列. Queue:消息队列载体 ...

  2. mac chromedriver error

    问题一:MAC 使用splinter error Traceback (most recent call last): from splinter.browser import Browser b = ...

  3. Dva框架从初识到上手

    引言 最近工作需要用dva框架,同事帮我培训了一下,有一点点认识,在此总结. 当然,以后对dva可能会了解更透彻,文章会不断更新的.   初识 开始看架构代码,没有看文档的时候,不知道里面的几个关键字 ...

  4. seajs与requirejs

    1 seajs暴露的两个对象 二 define()定义 引用模块 三插件 css插件和requirejs插件 4 seajs使用和建议

  5. 【 React -- 2/100 】使用React实现评论功能

    React| 组件化 | 递归 | 生成唯一ID 需要探究一下 .find() 和 findIndex() 的区别 import React from 'react' import './commen ...

  6. Kafka在windows下的配置使用

    Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处理大量 ...

  7. LoadPicture函数用法示例

    VB语言中LoadPicture函数用法示例: 本例使用 LoadPicture 函数将图片加载到窗体的 PictureBox 控件并从控件上清除掉该图片. 要试用此例,将 PictureBox 控件 ...

  8. hdu 1506 单调栈

    #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #defin ...

  9. solaris硬盘格式化分区

    创建EFI分区及挂载文件系统的过程: # format AVAILABLE DISK SELECTIONS: 0. c1t0d0 <LSI-MR9261-8i-2.12-557.86GB> ...

  10. Java 学习输入1234 求和

    输入任何整数都能求和 import java.util.Scanner; /** * @author 作者anil E-mail:888@yirose.com * @date 创建时间:2017年3月 ...