Vue 组件 .sync 修饰符

向右看齐 2022-05-18 00:34 244阅读 0赞 
  1. 今天看vue官网的sync修饰符有点不理解，发现这篇解决了我的疑惑，故转载一下
  3. <div id="app"> 
  4.       <div>父组件bar: { {bar}} </div> 
  5.       <comp :foo.sync="bar"> </comp> 
  6.       <!-- <comp :foo="bar" @update:foo="val => bar = val"></comp> --> 
  7.       </div>
  12. <script> 
  13.       Vue.component( 'comp', { 
  14.       template: '<div><button @click="increment">点我更新子组件foo++</button><div>子组件foo: { {foo}}</div></div>', 
  15.       props: [ 'foo'], 
  16.       methods: { 
  17.       increment: function() { 
  18.       this.foo++; 
  19.       this.$emit( 'update:foo', this.foo); 
  20.       } 
  21.       } 
  22.       }); 
  24.       new Vue({ 
  25.       el: '#app', 
  26.       data: { bar: 0} 
  27.       }); 
  28.       </script>

:foo.sync="bar" 实际就是 :foo="bar" @update:foo="val => bar = val" 的语法糖

转自：https://www.jianshu.com/p/5bde35206dd0

发表评论

表情：
评论列表 （有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue之.sync修饰符

    根据VUE官方文档所述，.sync修饰符用来prop双向绑定，而.sync修饰符类似v-model，只是一个语法糖 ![在这里插入图片描述][watermark_type_

    怼烎@怼烎@/ 0 赞/ 77 阅读

    相关 .sync修饰符

    第一步：先用一句话解释 .sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。 第二步：具体解释 一般情况下，想要实现父子组件间

    我不是女神ヾ我不是女神ヾ/ 0 赞/ 207 阅读