本篇文章給大家分享的是有關(guān)vue中怎么利用v-model指令實現(xiàn)父子組件通信，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供睢寧縣網(wǎng)站建設(shè)、睢寧縣做網(wǎng)站、睢寧縣網(wǎng)站設(shè)計、睢寧縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、睢寧縣企業(yè)網(wǎng)站模板建站服務(wù)，十多年睢寧縣做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

vue的雙向數(shù)據(jù)綁定

v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會相應(yīng)的更新為相同的數(shù)據(jù)。

這個問題在很多前端面試中，會提及。面試官問你，vue的雙向數(shù)據(jù)綁定原理是什么？當然，這個也是耳熟能詳?shù)膯栴}，百度隨便一搜索，到處都能找到答案。

一般都會搜索到，是用Object.defineProperty( ) ，來監(jiān)聽數(shù)據(jù)get和set，來實現(xiàn)數(shù)據(jù)劫持的。

假如對Object.defineProperty( )不是很了解，可以點擊上面鏈接，看看其語法！

舉個簡單的例子：

var blog = {
 name: 'haorooms博客'
};
console.log(blog.name); // haorooms博客

如果想要在執(zhí)行console.log(blog.name)的同時，直接給haorooms博客加個書名號，那要怎么處理呢？或者說要通過什么監(jiān)聽對象 blog的屬性值。這時候Object.defineProperty( )就派上用場了，代碼如下：

var blog= {}
var name = '';
Object.defineProperty(blog, 'name', {
 set: function (value) {
 name = value;
 console.log('歡迎來到' + value);
 },
 get: function () {
 return '《' + name + '》'
 }
})
blog.name = 'haorooms博客'; // 歡迎來到haorooms博客
console.log(blog.name); // 《haorooms博客》

上面代碼執(zhí)行一下，可以查看效果！

關(guān)于 vue的雙向數(shù)據(jù)綁定，具體如何實現(xiàn)的？網(wǎng)上也有很多實現(xiàn)的代碼，這里就不多累贅了！

v-model 的使用

上面開了一個小差，講了那么多，其實就是為了說明Vue 是單項數(shù)據(jù)流，v-model 只是語法糖而已。

<input v-model="haorooms" />
<input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />

第一行的代碼其實只是第二行的語法糖。然后第二行代碼還能簡寫成這樣：

<input :value="haorooms" @input="haorooms= $event.target.value" />

也就是說，

<input v-model="haorooms" />

也可以寫成

<input :value="haorooms" @input="haorooms= $event.target.value" />

v-model在組件上的使用

回到我們一開始的疑問了？vue中v-model如何進行父子組件的通信？如何在組件中使用呢？假如你理解了我上面的例子，那么，我們就可以很簡單的在組件中使用v-model了。

父組件代碼如下：

 <template>
 <div id="demo">
 <test-model v-model="haorooms"></test-model>
 <span>{{haorooms}}</span>
</div>
</template>
<script>
  import testModel from 'src/components/testModel'
  export default {
   data(){
      return{
         haorooms: "haorooms"
      }
    },
    components: {
      testModel,
    }
  }
</script>
<style lang="scss" scoped>
</style>

子組件代碼如下：

<template>
<span>
   <input
    ref="input"
    :value="value"
    @input="$emit('balabala', $event.target.value)"
   >
  </span>
</template>
<script>
  export default {
    data(){
      return{
      }
    },
    props: ["value"],
    model: {
      prop: 'value',
      event: 'balabala'
    }
  }
</script>
<style lang="scss" scoped>
</style>

我們可以通過上面代碼，子組件修改父組件v-model綁定的值！

實現(xiàn)截圖如下：

v-model 的缺點和解決辦法

在創(chuàng)建類似復(fù)選框或者單選框的常見組件時，v-model就不好用了。

<input type="checkbox" v-model="haorooms" />

我們可以用如下方式解決：

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

父組件可以如下寫：

<my-checkbox v-model="haorooms"></my-checkbox>

子組件：

<input 
        type="checkbox"
        <!--這里就不用 input 了，而是 balabala-->
        @change="$emit('balabala', $event.target.checked)"
        :checked="value"
       />
 export default {
    data(){
      return{
      }
    },
    props: ['checked'], //這里就不用 value 了，而是 checked
   model: {
     prop: 'checked',
     event: 'balabala'
    },
  }

以上就是vue中怎么利用v-model指令實現(xiàn)父子組件通信，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標題：vue中怎么利用v-model指令實現(xiàn)父子組件通信-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://jinyejixie.com/article44/deoiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、服務(wù)器托管、電子商務(wù)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)