这个关键字在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. 解决keil5中文注释乱码方法

    菜单上面的edit-->Configuration-->Editor-->Encoding 选择Chinese GB2312 点击OK即可解决 参考 解决keil和source in ...

  2. [LeetCode] 82. 删除排序链表中的重复元素 II

    题目链接 : https://leetcode-cn.com/problems/remove-duplicates-from-sorted-list-ii/ 题目描述: 给定一个排序链表,删除所有含有 ...

  3. T-聊天止于呵呵

    (现代版)俗话说:流言止于智者,聊天止于呵呵.输入一段聊天记录,你的任务是数一数有 多少段对话“止于呵呵”,即对话的最后一句话包含单词 hehe 或者它的变形. 具体来说,我们首先提取出对话的最后一句 ...

  4. Enlarge GCD(素数筛)

    题意 删去最少的数,使gcd变大 题解 只要保留相同素数因子最多的数即可. 素数筛. C++代码 #include<bits/stdc++.h> using namespace std; ...

  5. 微信小程序 IView List与Icon结合使用

    wxml <i-cell-group>     <i-cell title="测试" is-link>           <i-icon slot= ...

  6. linux下iptables讲解

    iptables(netfilter网络过滤器) iptables是linux上特有的防火墙机制,功能非常强大.CentOS默认是没有iptables规则. iptables命令可用于配置Linux的 ...

  7. 013-linux系统管理——系统资源查看

    linux系统管理——系统资源查看 ############# vmstat 命令 监控系统资源 ############# vmstat [刷新时间 刷新次数] [root@zabbix ~]# v ...

  8. 4Linux 终端命令格式

    Linux 终端命令格式 转自 目标 了解终端命令格式 知道如何查阅终端命令帮助信息 01. 终端命令格式 command [-options] [parameter] 说明: command:命令名 ...

  9. Stack Overflow 推荐编程书单

    Stack Overflow 推荐编程书单   1 Working Effectively with Legacy Code Michael C. Feathers 修改代码是每一位软件开发人员的日常 ...

  10. linux如何在shell中自动生成1到100的数组

    之前自己在写shell脚本的时候,需要自动创建1-100的文本确不知道该如何去创建.百度一翻终于知道了创建的方法. 在shell脚本中创建1-100的方法很多,那我在这里主要就说两种容易理解且方便的方 ...