Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
方式一:通過監(jiān)聽事件實(shí)現(xiàn)
父組件將數(shù)據(jù)傳遞給子組件通過 props 實(shí)現(xiàn);而子組件將數(shù)據(jù)傳遞給父組件通過事件來實(shí)現(xiàn),在子組件中定義一個(gè)事件,在該事件中傳遞值,由父組件中監(jiān)聽這個(gè)事件。通過這種方式實(shí)現(xiàn)父子組件雙向綁定的效果最常見。
子組件案例代碼:
<template> <el-select v-model="value" placeholder="請(qǐng)選擇" @change="change"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { name: 'sonTest', // props 下定義父組件傳遞給子組件的數(shù)據(jù) props: { // 父組件使用子組件時(shí)通過 :options 傳遞給子組件 options: { type: Array, default: [] } }, data() { return { value: '' } }, methods: { change() { console.log('子組件下拉框值發(fā)生改變:', this.value) // 當(dāng)下拉框中選定的值發(fā)生改變后,通過 $emit 回調(diào) update 事件,并將修改后的值返回給父組件 this.$emit('update', this.value) // 觸發(fā)父組件的 @update 事件 // 父組件使用子組件時(shí)通過 @update 指定回調(diào)的處理方法 } } } </script> <style scoped> </style>
父組件案例代碼:
<template> <son-test :options="options" @update="update"></son-test> </template> <script> import SonTest from './sonTest' export default { name: 'fatherTest', components: { SonTest }, data() { return { value: '', options: [ { value: '選項(xiàng)1', label: '黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎' }, { value: '選項(xiàng)4', label: '龍須面' }, { value: '選項(xiàng)5', label: '北京烤鴨' } ], } }, methods: { update(newValue) { // 與 value 實(shí)現(xiàn)雙向綁定效果 this.value = newValue console.log('子組件通過事件傳遞過來的值:', newValue) }, } } </script> <style scoped> </style>
優(yōu)點(diǎn):可以實(shí)現(xiàn)父子組件多個(gè)值的雙向綁定效果。
缺點(diǎn):父組件需要編寫監(jiān)聽子組件事件的代碼。
方式二:通過 v-model 實(shí)現(xiàn)
在子組件中指定 model 變量,父組件中通過 v-model 指令來實(shí)現(xiàn)雙向綁定,通過這種方式父組件無需監(jiān)聽子組件的事件。
子組件案例代碼:
<template> <el-select v-model="sonValue" placeholder="請(qǐng)選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { name: 'sonTest', // props 下定義父組件傳遞給子組件的數(shù)據(jù) props: { // 父組件使用子組件時(shí)通過 :options 傳遞給子組件 options: { type: Array, default: [] }, value: { type: String, default: '' } }, model: { // 需要雙向綁定的 props 變量名稱,也就是父組件通過 v-model 與子組件雙向綁定的變量 prop: 'value', // 定義由 $emit 傳遞變量的名稱 event: 'newValue' }, data() { return { // 子組件不能修改 props 下的變量,所以定義一個(gè)臨時(shí)變量 sonValue: this.value } }, watch: { // 監(jiān)聽 sonValue 臨時(shí)變量,如果臨時(shí)變量發(fā)生變化,那么通過 $emit 將新的值傳遞給父組件 sonValue(value) { console.log('子組件下拉框值發(fā)生改變:', this.sonValue) // 【注意】newValue x需要和 model.event 定義的值一致 this.$emit('newValue', this.sonValue) } } } </script> <style scoped> </style>
父組件案例代碼:
<template> <son-test :options="options" v-model="value"></son-test> </template> <script> import SonTest from './sonTest' export default { name: 'fatherTest', components: { SonTest }, data() { return { value: '選項(xiàng)1', options: [ { value: '選項(xiàng)1', label: '黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎' }, { value: '選項(xiàng)4', label: '龍須面' }, { value: '選項(xiàng)5', label: '北京烤鴨' } ], } }, watch:{ // 下面這個(gè)監(jiān)聽只是為了打印顯示 value(newValue){ console.log('value 值發(fā)生改變:', newValue) } } } </script> <style scoped> </style>
優(yōu)點(diǎn):父組件無需編寫額外的代碼,直接通過 v-model 實(shí)現(xiàn)雙向綁定。
缺點(diǎn):這種方式只能雙向綁定一個(gè)值。
到此這篇關(guān)于Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)的文章就介紹到這了,更多相關(guān)vue父子組件數(shù)據(jù)雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3+TS項(xiàng)目中eslint、prettier安裝配置詳細(xì)指南
為了更好的統(tǒng)一項(xiàng)目的代碼風(fēng)格,因此在編寫時(shí)就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯(cuò)誤,讓代碼變得更加嚴(yán)謹(jǐn),這篇文章主要給大家介紹了關(guān)于Vue3+TS項(xiàng)目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下2024-07-07vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架,本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02vue3?組合式api中?ref?和$parent?的使用方法
vue3中, 在 組件中添加一個(gè) component ref=“xxx” ,就可以在父組件中得到 子組件的 dom 對(duì)象, 以及 虛擬的 dom 對(duì)象, 有了虛擬 dom, 我們就可以在父組件中控制子組件的顯示了,這篇文章主要介紹了vue3組合式api中ref和$parent的使用,需要的朋友可以參考下2023-09-09Vue3中的shallowRef?和shallowReactive對(duì)比分析
這篇文章主要介紹了Vue3中的shallowRef?和shallowReactive,通過示例代碼逐一對(duì)他們的使用做的詳細(xì)介紹,文末補(bǔ)充介紹了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用,需要的朋友可以參考下2023-01-01關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號(hào)密碼查出用戶信息,根據(jù)用戶id與name生成token并返回,userinfo則是對(duì)token進(jìn)行獲取,在查出對(duì)應(yīng)值進(jìn)行返回,感興趣的朋友一起看看吧2022-05-05詳解el Cascader懶加載數(shù)據(jù)回顯示例
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07