溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題

發(fā)布時間：2020-09-24 14:20:42 來源：腳本之家 閱讀：231 作者：CHJ_1993 欄目：web開發(fā)

1.前言

最近在vue 項目中有一個需求， 就是我需要根據(jù)不同的類型在頁面中放不同的組件， 組件需要跟當(dāng)前頁面的數(shù)據(jù)進行雙向綁定，如果都寫在同一個頁面 代碼會顯得比較多，畢竟我當(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)站的支持！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手