vue组件双向绑定.sync修饰符的一个坑

我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。
在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发

    this.$emit('update:foo', newValue)

这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加空格，我也是，所以写出来当作一个笔记。
根据文档

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

会被扩展为：

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

所以update:foo就是事件的名称，事件里面是一个函数，传入val参数赋值给bar变量。。。。所以update:foo是一个事件名，你加空格就完全变了一个事件名了。
至于怎么变，估计得看文档，我也不懂-_-

转载于:https://www.cnblogs.com/cltomoya/p/8900665.html

vue组件双向绑定.sync修饰符的一个坑相关推荐

Vue组件通信以及.sync修饰符的使用
文章目录前言一.Vue的组件通信方式 1.1 props/$emit 1.2 Vuex 二.Vue的.sync修饰符 2.1 父组件向子组件传递数据 2.2 子组件使用props接收父组件的数据 ...
Vue数据双向绑定.sync 和v-model
结论: .sync 和v-model两者的本质都是语法糖, 目的都是实现组件与外部数据的双向绑定. v-model 是 .sync的一种体现..sync 比较灵活;v-model较单一 .sync修饰 ...
Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值
vue2.3.0+使用.sync修饰符对prop进行双向绑定背景.概念: 在一些情况下,我们可能会需要对一个 prop 进行"双向绑定".事实上,这正是 Vue 1.x 中的.s ...
angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
Vue v-model 指令详解以及sync修饰符的使用场景（结合父子组件通信案例）
参考Vue官方文档一.需求如下: 二.代码如下三.分步解析: 父组件给子组件传值: 子组件给父组件传值: 四.sync修饰符的使用 vue.js官方文档如果已经使用了v-model双向绑定了一个 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
vue子组件通过.sync修饰符修改props属性
在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten w ...
Vue 父子组件双向绑定传值
最简单的双向绑定(单文件中)就是表单元素的v-model了,如果同时设置v-model和value,value属性无效. 自定义v-model:(不推荐) child: <template> ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...

vue组件双向绑定.sync修饰符的一个坑

vue组件双向绑定.sync修饰符的一个坑相关推荐

最新文章

热门文章