1.前言

創(chuàng)新互聯(lián)公司長(zhǎng)期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為樟樹(shù)企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)，樟樹(shù)網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

最近在vue 項(xiàng)目中有一個(gè)需求， 就是我需要根據(jù)不同的類型在頁(yè)面中放不同的組件， 組件需要跟當(dāng)前頁(yè)面的數(shù)據(jù)進(jìn)行雙向綁定，如果都寫在同一個(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

他會(huì)擴(kuò)展成：

父組件全部代碼：

import CertificateInput from '../common/CertificateInput.vue'
export default {
 name: 'fathor',
 components: {
  CertificateInput 
 },
 data() {
  return {
   pname:"",
   xiname:""
 }  
}

子組件

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

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

由上面可以看出   子組件主要代碼 就是監(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é)寫的好low

以后多多改善

總結(jié)

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