Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題
1.前言
最近在vue 項目中有一個需求， 就是我需要根據(jù)不同的類型在頁面中放不同的組件， 組件需要跟當(dāng)前頁面的數(shù)據(jù)進(jìn)行雙向綁定，如果都寫在同一個頁面 代碼會顯得比較多，畢竟我當(dāng)前頁面已經(jīng)7-800行代碼了 所以我需要把一些元素定義成組件 ，封裝起來，所以就會遇到 數(shù)據(jù)的傳值綁定問題
2.父組件
首先我們來看看官方文檔 [ https://cn.vuejs.org/v2/guide/components.html#sync-修飾符 ]
.sync 修飾符所提供的功能。當(dāng)一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定
就是說我們可以直接在我們需要傳的prop后面加上 .sync
比如 我下面需要綁定 p_model,然后我在他后面加上.sync
<certificate-input
:p_model.sync='pname'>
</certificate-input>
他會擴展成：
<certificate-input :p_model="pname" @update:p_model="val => pname= val"></certificate-input>
父組件全部代碼：
<template>
<div>
<certificate-input
:p_model.sync='pname'
:xi_model.sync="xiname">
</certificate-input>
</div>
</template>
import CertificateInput from '../common/CertificateInput.vue'
export default {
name: 'fathor',
components: {
CertificateInput
},
data() {
return {
pname:"",
xiname:""
}
}
子組件
上面說了一大推父組件下面我們來看看子組件怎么寫 ？
因為我項目中使用vux 代碼就直接復(fù)制過來改了一下
<template>
<div>
<x-input
title="姓名"
v-model="name"
></x-input>
<x-input title="身份證號"
v-model="idCard"
placeholder="請輸入身份證號"
required>
</x-input>
</div>
</template>
<script type="text/javascript">
import { XInput} from 'vux'
export default{
name:'certificateInput',
props:["p_model","xi_model"],
components:{
XInput
},
data(){
return{
name:this.p_model,
idCard:this.xi_model
}
},
watch:{
p_model(val) {
this.address = val;
},
name(val){
//設(shè)置監(jiān)聽，如果改變就更新 p_model
this.$emit('update:p_model', val)
},
xi_model(val){
this.certificate = val
},
idCard(val){
this.$emit('update:xi_model', val)
}
}
}
</script>
由上面可以看出 子組件主要代碼 就是監(jiān)聽他的改變 然后觸發(fā)父組件監(jiān)聽的事件
name(val){
//設(shè)置監(jiān)聽，如果改變就更新 p_model
this.$emit('update:p_model', val)
}
好了 上面就是我的方法
感覺寫的好low
以后多多改善
總結(jié)
以上所述是小編給大家介紹的Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue中的reactive函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法
今天小編就為大家分享一篇vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue使用mui遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue踩坑記之npm?install報錯問題解決總結(jié)
當(dāng)你跑起一個項目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報錯問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理，返回需要的結(jié)果。這篇文章主要給大家介紹vue 過濾器filter實例，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
這篇文章主要介紹了 vue指令v-html和v-text，文章圍繞vue指令v-html和v-text的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對大家有所幫助2021-11-11
如何在Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報
為什么要在標(biāo)題里加上一個業(yè)務(wù)數(shù)據(jù)的上報呢，因為在咱們前端項目中，可上報的數(shù)據(jù)維度太多，比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務(wù)數(shù)據(jù)的埋點。2021-05-05
vue前端實現(xiàn)表格數(shù)據(jù)增查改刪功能
增刪改查是我們寫項目百分之七十會遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05