1.前言
最近在vue 項目中有一個需求， 就是我需要根據(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:"" } }子組件
上面說了一大推父組件下面我們來看看子組件怎么寫 ？
因為我項目中使用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)網(wǎng)站的支持！
新聞熱點
疑難解答
