Understand .sync in Vue

ysl_unh 发布于2019-08-23 13:43 / 1521人阅读

Preface

The first time I met .sync modifier, I didn"t know it very well. So, I seldom use that. Today, I am going to get it.

Main

In the past, I use “two-way binding” like this:


    
    parent component {{parCount}}

let app = new Vue({
  el: "#app",
  data: {
    parCount: 0
  },
  methods: {
    add() {
      this.parCount++
    }
  },
  components: {
    "button-counter": {
      template:
        "",
      props: ["childCount"],
      methods: {
        add() {
          this.$emit("add")
        }
      }
    }
  }
})

It was easy to understand except a little inconvenient. I need to listen and handle event in child and parent component. Also

true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

So, Vue recommends emitting events in the pattern of update:myPropName. For example:

  
    
    parent component {{parCount}}

let app = new Vue({
  el: "#app",
  data: {
    parCount: 0
  },
  methods: {},
  components: {
    "button-counter": {
      template:
        "",
      props: ["childCount"],
      methods: {
        add() {
          this.$emit("update:child-count", this.childCount + 1) // child-count is right while childCount won"t work
        }
      }
    }
  }
})

See? In this case, we don"t have to add event callback in parent component because vue have done that. And this is the principle of .sync. For convenience, Vue offers a shorthand for this pattern with the .sync modifier which would make the code above like:

  
    
    parent component {{parCount}}

let app = new Vue({
  el: "#app",
  data: {
    parCount: 0
  },
  methods: {},
  components: {
    "button-counter": {
      template:
        "",
      props: ["childCount"],
      methods: {
        add() {
          this.$emit("update:childCount", this.childCount + 1) // childCount is right while child-count won"t work
        }
      }
    }
  }
})

Also,

The .sync modifier can also be used with v-bind when using an object to set multiple props at once:

This passes each property in the doc object (e.g. title) as an individual prop, then adds v-on update listeners for each one.

For more information, go Vue.js

Original Post

云服务器 GPU云服务器 understand Sync sync ocket android sync http

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99436.html

Easier Way to Understand apply and call in JS

The first time I know apply was when I met this code: Math.max.apply(null, [1, 2, 3, 4]) As the mdn shows, the syntax is: function.apply( thisArg , [argsArray] ) Actually, in case above, thisArg has n...

Wildcard 2019-08-23 13:55 评论0 收藏0
Vue源码浅析之异步组件注册

showImg(https://segmentfault.com/img/bVba39I?w=400&h=400); Vue的异步组件注册 Vue官方文档提供注册异步组件的方式有三种: 工厂函数执行 resolve 回调工厂函数中返回Promise 工厂函数返回一个配置化组件对象工厂函数执行 resolve 回调我们看下 Vue 官方文档提供的示例: Vue.component(asyn...

Shonim 2019-08-23 18:07 评论0 收藏0
2017-08-30 前端日报

摘要：前端日报精选精读个最佳特性翻译轻量级函数式编程第章组合函数之组件类型写的姿势中文周二放送面试题详解知乎专栏译原生值得学习吗答案是肯定的掘金个超赞的视觉效果众成翻译布局时常见总结腾讯前端团队社区归档打地鼠入门学习书籍 2017-08-30 前端日报精选精读《Web fonts: when you need them, when you don’t》10个最佳ES6特性翻译 -《Jav...

weizx 2019-08-20 19:03 评论0 收藏0
2017-08-08 前端日报

摘要：前端日报精选一行代码的逆向工程译只需四个步骤使用实现页面过渡动画如何实现一个基于的模板引擎解剖组件的多种写法与演进深入理解笔记扩展对象的功能性中文基础系列一之实现抽奖刮刮卡橡皮擦掘金小游戏个人文章和最常用的特征众成翻译常用语法总 2017-08-08 前端日报精选一行 JavaScript 代码的逆向工程【译】只需四个步骤：使用 React 实现页面过渡动画如何实现一个基于 DOM...

alin 2019-08-20 18:36 评论0 收藏0
Vue Form Input Bindings Fail ?

Blog Address Preface When I was using form validate in Vue, I found sometimes vue doesnt render data which was modified by me. I even thought it was a bug. Anyway, lets take a look. Main Here is a sim...

pkwenda 2019-08-26 13:26 评论0 收藏0