資訊專欄INFORMATION COLUMN
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.
MainIn 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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99436.html
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...
showImg(https://segmentfault.com/img/bVba39I?w=400&h=400); Vue的異步組件注冊(cè) Vue官方文檔提供注冊(cè)異步組件的方式有三種: 工廠函數(shù)執(zhí)行 resolve 回調(diào) 工廠函數(shù)中返回Promise 工廠函數(shù)返回一個(gè)配置化組件對(duì)象 工廠函數(shù)執(zhí)行 resolve 回調(diào) 我們看下 Vue 官方文檔提供的示例: Vue.component(asyn...
摘要：前端日?qǐng)?bào)精選精讀個(gè)最佳特性翻譯輕量級(jí)函數(shù)式編程第章組合函數(shù)之組件類型寫的姿勢(shì)中文周二放送面試題詳解知乎專欄譯原生值得學(xué)習(xí)嗎答案是肯定的掘金個(gè)超贊的視覺(jué)效果眾成翻譯布局時(shí)常見(jiàn)總結(jié)騰訊前端團(tuán)隊(duì)社區(qū)歸檔打地鼠入門學(xué)習(xí)書籍 2017-08-30 前端日?qǐng)?bào) 精選 精讀《Web fonts: when you need them, when you don’t》10個(gè)最佳ES6特性翻譯 -《Jav...
摘要：前端日?qǐng)?bào)精選一行代碼的逆向工程譯只需四個(gè)步驟使用實(shí)現(xiàn)頁(yè)面過(guò)渡動(dòng)畫如何實(shí)現(xiàn)一個(gè)基于的模板引擎解剖組件的多種寫法與演進(jìn)深入理解筆記擴(kuò)展對(duì)象的功能性中文基礎(chǔ)系列一之實(shí)現(xiàn)抽獎(jiǎng)刮刮卡橡皮擦掘金小游戲個(gè)人文章和最常用的特征眾成翻譯常用語(yǔ)法總 2017-08-08 前端日?qǐng)?bào) 精選 一行 JavaScript 代碼的逆向工程【譯】只需四個(gè)步驟：使用 React 實(shí)現(xiàn)頁(yè)面過(guò)渡動(dòng)畫如何實(shí)現(xiàn)一個(gè)基于 DOM...
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...
閱讀 1896·2019-08-30 15:53
閱讀 3220·2019-08-30 15:44
閱讀 2823·2019-08-26 13:31
閱讀 1972·2019-08-26 12:10
閱讀 826·2019-08-26 11:01
閱讀 2152·2019-08-23 15:32
閱讀 1612·2019-08-23 13:43
閱讀 2564·2019-08-23 11:58
