Vue 组件 .sync 修饰符

<div id="app">
    <div>父组件bar: {{bar}}</div>
    <comp :foo.sync="bar"></comp>
    <!-- <comp :foo="bar" @update:foo="val => bar = val"></comp> -->
</div>

<script>
Vue.component('comp', {
  template: '<div><button @click="increment">点我更新子组件foo++</button><div>子组件foo: {{foo}}</div></div>',
  props: ['foo'],
  methods: {
    increment: function() {
      this.foo++;
      this.$emit('update:foo', this.foo);
    }
  }
});

new Vue({
  el: '#app',
  data: {bar: 0}
});
</script>

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容