Vue 實現(xiàn)雙向綁定的四種方法
1. v-model 指令
<input v-model="text" />
上例不過是一個語法糖,展開來是:
<input :value="text" @input="e => text = e.target.value" />
2. .sync 修飾符
<my-dialog :visible.sync="dialogVisible" />
這也是一個語法糖,剝開來是:
<my-dialog :visible="dialogVisible" @update:visible="newVisible => dialogVisible = newVisible" />
my-dialog 組件在 visible 變化時 this.$emit('update:visible', newVisible)
即可。
3. model 屬性 (JSX/渲染函數(shù)中)
Vue 在 2.2.0 版本以后,允許自定義組件的 v-model ,這就導(dǎo)致在 JSX / 渲染函數(shù)中實現(xiàn) v-model 時得考慮組件的不同配置,不能一律如此(假使 my-dialog 組件的 model 為 { prop: 'visible', event: 'change' } ):
{ render(h) { return h('my-dialog', { props: { value: this.dialogVisible }, on: { input: newVisible => this.dialogVisible = newVisible } }) } }
而應(yīng)如此:
{ render(h) { return h('my-dialog', { props: { visible: this.dialogVisible }, on: { change: newVisible => this.dialogVisible = newVisible } }) } }
然而,利用 model 屬性,完全可以做到不用管它 prop 、 event 的目的:
{ render(h) { return h('my-dialog', { model: { value: this.dialogVisible, callback: newVisible => this.dialogVisible = newVisible } }) } }
JSX 中這樣使用:
{ render() { return ( <my-dialog {...{ model: { value: this.dialogVisible, callback: newVisible => this.dialogVisible = newVisible } }} /> ) } }
4. vue-better-sync 插件
有需求如此:開發(fā)一個 Prompt 組件,要求同步用戶的輸入,點擊按鈕可關(guān)閉彈窗。
一般我們會這樣做:
<template> <div v-show="_visible"> <div>完善個人信息</div> <div> <div>尊姓大名?</div> <input v-model="_answer" /> </div> <div> <button @click="_visible = !_visible">確認</button> <button @click="_visible = !_visible">取消</button> </div> </div> </template> <script> export default { name: 'prompt', props: { answer: String, visible: Boolean }, computed: { _answer: { get() { return this.answer }, set(value) { this.$emit('input', value) } }, _visible: { get() { return this.visible }, set(value) { this.$emit('update:visible', value) } } } } </script>
寫一兩個組件還好,組件規(guī)模一旦擴大,寫雙向綁定真能寫出毛病來。于是,為了解放生產(chǎn)力,有了 vue-better-sync 這個輪子,且看用它如何改造我們的 Prompt 組件:
<template> <div v-show="actualVisible"> <div>完善個人信息</div> <div> <div>尊姓大名?</div> <input v-model="actualAnswer" /> </div> <div> <button @click="syncVisible(!actualVisible)">確認</button> <button @click="syncVisible(!actualVisible)">取消</button> </div> </div> </template> <script> import VueBetterSync from 'vue-better-sync' export default { name: 'prompt', mixins: [ VueBetterSync({ prop: 'answer', // 設(shè)置 v-model 的 prop event: 'input' // 設(shè)置 v-model 的 event }) ], props: { answer: String, visible: { type: Boolean, sync: true // visible 屬性可用 .sync 雙向綁定 } } } </script>
vue-better-sync 統(tǒng)一了 v-model 和 .sync 傳遞數(shù)據(jù)的方式,你只需 this.actual${PropName} = newValue
或者 this.sync${PropName}(newValue)
即可將新數(shù)據(jù)傳遞給父組件。
GitHub: fjc0k/vue-better-sync
總結(jié)
以上所述是小編給大家介紹的Vue 實現(xiàn)雙向綁定的四種方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Vue2實現(xiàn)組件props雙向綁定
- vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定)
- 深入理解vue.js雙向綁定的實現(xiàn)原理
- Vue2.0利用 v-model 實現(xiàn)組件props雙向綁定的優(yōu)美解決方案
- Vuejs第一篇之入門教程詳解(單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù))
- Vue父子組件雙向綁定傳值的實現(xiàn)方法
- Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
- Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)
- Angular和Vue雙向數(shù)據(jù)綁定的實現(xiàn)原理(重點是vue的雙向綁定)
- Vue2.x和Vue3.x的雙向綁定原理詳解
相關(guān)文章
vue實現(xiàn)過渡動畫Message消息提示組件示例詳解
這篇文章主要為大家介紹了vue實現(xiàn)過渡動畫Message消息提示組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下2021-07-07在vue項目中promise解決回調(diào)地獄和并發(fā)請求的問題
這篇文章主要介紹了在vue項目中promise解決回調(diào)地獄和并發(fā)請求的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題
這篇文章主要介紹了vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Vue3?中?watch?與?watchEffect?區(qū)別及用法小結(jié)
這篇文章主要介紹了Vue3?中?watch?與?watchEffect?有什么區(qū)別?watch中需要指明監(jiān)視的屬性,也需要指明監(jiān)視的回調(diào),而watchEffect中不需要指明監(jiān)視的屬性,只需要指明監(jiān)視的回調(diào),回調(diào)函數(shù)中用到哪個屬性,就監(jiān)視哪個屬性,本文給大家詳細介紹,需要的朋友參考下2022-06-06詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11