Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題
1.前言
最近在vue 項(xiàng)目中有一個需求， 就是我需要根據(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>
他會擴(kuò)展成：
<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:""
}
}
子組件
上面說了一大推父組件下面我們來看看子組件怎么寫 ？
因?yàn)槲翼?xiàng)目中使用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 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
解決vscode?Better?Comments插件在vue文件中不顯示相對應(yīng)的顏色的問題
最近使用了Better?Comments這款插件，發(fā)現(xiàn)在ts文件中可以顯示對應(yīng)的顏色，但在vue文件中并不顯示對應(yīng)顏色?，下面小編給大家分享解決方法，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個DOM元素綁定事件,如點(diǎn)擊、鼠標(biāo)移動、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了Hooks對于Vue作用意義詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要介紹了Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級聯(lián)動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue的傳參方式和router使用技巧,本文給大家列舉了好幾種傳參方式，需要的朋友可以參考下2018-05-05
Vant是一套輕量、可靠的移動端組件庫,通過Vant可以快速搭建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動端Vue組件庫問題的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
解決element?ui?cascader?動態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08