快捷導(dǎo)航

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

更新時(shí)間：2019年04月04日 11:05:39 作者：CHJ_1993

這篇文章主要介紹了Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下

1.前言

最近在vue 項(xiàng)目中有一個(gè)需求，就是我需要根據(jù)不同的類型在頁(yè)面中放不同的組件，組件需要跟當(dāng)前頁(yè)面的數(shù)據(jù)進(jìn)行雙向綁定，如果都寫(xiě)在同一個(gè)頁(yè)面代碼會(huì)顯得比較多，畢竟我當(dāng)前頁(yè)面已經(jīng)7-800行代碼了所以我需要把一些元素定義成組件，封裝起來(lái)，所以就會(huì)遇到數(shù)據(jù)的傳值綁定問(wèn)題

2.父組件

首先我們來(lái)看看官方文檔 [ https://cn.vuejs.org/v2/guide/components.html#sync-修飾符 ]

.sync 修飾符所提供的功能。當(dāng)一個(gè)子組件改變了一個(gè) prop 的值時(shí)，這個(gè)變化也會(huì)同步到父組件中所綁定

就是說(shuō)我們可以直接在我們需要傳的prop后面加上 .sync

比如我下面需要綁定 p_model,然后我在他后面加上.sync

<certificate-input
    :p_model.sync='pname'>
 </certificate-input>

他會(huì)擴(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:""
 }  
}

子組件

上面說(shuō)了一大推父組件下面我們來(lái)看看子組件怎么寫(xiě) ？

因?yàn)槲翼?xiàng)目中使用vux 代碼就直接復(fù)制過(guò)來(lái)改了一下

<template>
 <div>
  <x-input
   title="姓名" 
   v-model="name" 
   ></x-input>
  <x-input title="身份證號(hào)" 
    v-model="idCard" 
    placeholder="請(qǐng)輸入身份證號(hào)"
    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)聽(tīng)，如果改變就更新 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)聽(tīng)他的改變然后觸發(fā)父組件監(jiān)聽(tīng)的事件

 name(val){
  //設(shè)置監(jiān)聽(tīng)，如果改變就更新 p_model
    this.$emit('update:p_model', val)
}

好了上面就是我的方法

感覺(jué)寫(xiě)的好low

以后多多改善

總結(jié)

以上所述是小編給大家介紹的Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: