Understand .sync in Vue

ysl_unh 發布于2019-08-23 13:43 / 1584人閱讀

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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