Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值

vue2.3.0+使用.sync修饰符对prop进行双向绑定

背景、概念：

在一些情况下，我们可能会需要对一个 prop 进行“双向绑定”。事实上，这正是 Vue 1.x 中的.sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别，当光看子组件的代码时，你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。

上面所说的正是我们在 2.0 中移除 .sync 的理由。但是在 2.0 发布之后的实际应用中，我们发现.sync 还是有其适用之处，比如在开发可复用的组件库时。

我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了.sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。

demo介绍：本demo的功用组件head.vue中，需要知道当前菜单是哪个，进而显示高亮，demo结合elementui

父组件，只需要留意红框部分

子组件header.vue，只需要留意红框部分：

其中el-menu为element-ui的菜单，点击菜单选项时会调用handleSelect函数，本人在handleSelect触发时改变prop中的active，

当子组件需要更新 active的值时，它需要显式地触发一个更新事件update:active

Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值相关推荐

vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
浅谈 Vue3 中的 v-model 和 sync 修饰符
很多同学对 Vue 的第一印象就是"响应式"."双向绑定"等特性,而 v-model 就是实现双向绑定的语法糖,用过 Vue 的小伙伴一定都非常熟悉.但是在 V ...
.sync修饰符的原理和使用
.sync 修饰符的作用就是实现父子组件数据的双向绑定,与v-model类似父组件内容: 子组件内容: 通过点击按钮改变父组件中的值 num和sum 开始时组建显示内容: 点击按钮后显示的内容: ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
Vue v-model 指令详解以及sync修饰符的使用场景（结合父子组件通信案例）
参考Vue官方文档一.需求如下: 二.代码如下三.分步解析: 父组件给子组件传值: 子组件给父组件传值: 四.sync修饰符的使用 vue.js官方文档如果已经使用了v-model双向绑定了一个 ...
vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
vue子组件通过.sync修饰符修改props属性
在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten w ...
vue的sync修饰符
vue 中父子组件通信的时候, 我们可能会看到 .snyc 的代码, 它实质上是一个语法糖, 不使用它我们也有解决的方案, 使用它的话,可以使我们的代码更加简洁而已. 首先, 我们实现一个功能, 在父 ...

Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值

Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值相关推荐

最新文章

热门文章