溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.前言
最近在vue 項目中有一個需求， 就是我需要根據不同的類型在頁面中放不同的組件， 組件需要跟當前頁面的數據進行雙向綁定，如果都寫在同一個頁面 代碼會顯得比較多，畢竟我當前頁面已經7-800行代碼了 所以我需要把一些元素定義成組件 ，封裝起來，所以就會遇到 數據的傳值綁定問題
2.父組件
首先我們來看看官方文檔 [ https://cn.vuejs.org/v2/guide/components.html#sync-修飾符 ]
.sync 修飾符所提供的功能。當一個子組件改變了一個 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 代碼就直接復制過來改了一下
<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){
//設置監聽，如果改變就更新 p_model
this.$emit('update:p_model', val)
},
xi_model(val){
this.certificate = val
},
idCard(val){
this.$emit('update:xi_model', val)
}
}
}
</script>
由上面可以看出 子組件主要代碼 就是監聽他的改變 然后觸發父組件監聽的事件
name(val){
//設置監聽，如果改變就更新 p_model
this.$emit('update:p_model', val)
}
好了 上面就是我的方法
感覺寫的好low
以后多多改善
總結
以上所述是小編給大家介紹的Vue使用.sync 實現父子組件的雙向綁定數據問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
