关于vue中sync修饰符的用法

.sync是在vue2.3.1+版本开始使用，在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

在这里用update: myPropName的模式触发事件取而代之，方法如下：子组件触发

this.$emit('update:title', newTitle)

这样父组件可以监听那个事件并根据需要更新一个本地的数据属性

<text-document v-bind:title.sync="title"></text-document>

注意：
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

关于vue中sync修饰符的用法相关推荐

vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
vue的sync修饰符
vue 中父子组件通信的时候, 我们可能会看到 .snyc 的代码, 它实质上是一个语法糖, 不使用它我们也有解决的方案, 使用它的话,可以使我们的代码更加简洁而已. 首先, 我们实现一个功能, 在父 ...
详细解析vue中的修饰符
1.表单输入框input中的修饰符 .lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新.不加lazy则是在keyup就更新,如下: <input v-mode ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
使用vue的sync修饰符进行子父组件的数据绑定
官方文档父组件代码 <template><div><input type="button" value="我是父组件的按钮" @ ...

关于vue中sync修饰符的用法

关于vue中sync修饰符的用法相关推荐

最新文章

热门文章