背景交代

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。

这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）

由于子组件改变 prop 的代码和普通的状体改动代码毫无区别，所以当你光看子组件的代码时，你完全不知道它合适悄悄地改变了父组件的状态。

这在 debug 复杂结构的应用时会带来很高的维护成本。于是我们在 vue 2.0 中移除了 .sync 。
但是在实际应用中，我们发现 .sync 还是有其适用之处的，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。
于是从 vue 2.3.0 开始，我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。他会被自动扩展为一个自动更新父组件属性的 v-on 监听器。

理解

示例代码：

<comp :foo.sync="val "></comp>

会被拓展为：

<comp :foo="bar" @update:foo="val = $event"></comp>

当子组件需要更新 foo 的值的时候，他需要显示的触发一个更新事件：

this.$emit( “update:foo”, newValue );

注意：
有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。
v-bind与.sync一起使用时不能简写为：html:.sync="doc.title"

示例

<template><div class="details"><myComponent :show.sync='valueChild'></myComponent><button @click="changeValue">toggle</button></div>
</template><script>
import Vue from 'vue'
Vue.component('myComponent', {template: `<div v-if="show"><p>默认初始值是{{show}}，所以是显示的</p><button @click.stop="closeDiv">关闭</button></div>`,props:['show'],methods: {closeDiv() {this.$emit('update:show', false); //触发 input 事件，并传入新值}}
})
export default{data(){return{valueChild:true,}},methods:{changeValue(){this.valueChild = !this.valueChild}}
}
</script>

参考资料：

https://cn.vuejs.org/v2/guide/components-custom-events.html

Vue之.sync 修饰符详解相关推荐

java访问修饰符详解——学java，零基础不怕，不只要理论，更要实践+项目，a href=http://www.bjweixin.com太原维信科技提供 /a...
java访问修饰符详解--学java,零基础不怕,不只要理论,更要实践+项目 <a href=http://www.bjweixin.com>太原维信科技提供 </a> pub ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
vue的sync修饰符
vue 中父子组件通信的时候, 我们可能会看到 .snyc 的代码, 它实质上是一个语法糖, 不使用它我们也有解决的方案, 使用它的话,可以使我们的代码更加简洁而已. 首先, 我们实现一个功能, 在父 ...
vue事件修饰符详解
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
Vue.js--表单绑定数据、修饰符详解
单行输入框 <div id="myApp"><h1>表单控件绑定</h1><input type="text" v-m ...
java 修饰符详解,详解Java修饰符
Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符非访问修饰符修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: 访问控制修饰符 Java中,可以使用访问控 ...
C#的方法的参数修饰符详解
方法参数修饰 (啥也没有) 如果参数的修饰是啥也没有,那么其参数传递的方式是值传递,接受方收到的是原始数据的拷贝 out 说明了参数是引用传递. params 可变参,注意了这种修饰符针对的参数一定是 ...
java final修饰符_java final修饰符详解，final修饰方法
之前给大家讲过java final修饰符final修饰变量方面的知识,那么下面要继续给大家讲到的就是final修饰方法方面的知识,一起来了解一下吧. final修饰的方法不能被重写,假如因为一些原因, ...

Vue之.sync 修饰符详解

背景交代

理解

示例

Vue之.sync 修饰符详解相关推荐

最新文章

热门文章