vue 2.0組件與v-model詳解

更新時間：2017年03月27日 11:15:38 作者：一步小僧

這篇文章主要介紹了vue 2.0組件與v-model的相關(guān)資料，文中介紹的非常詳細(xì)，本文適合初學(xué)組件編寫的同學(xué)閱讀，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

大家可能乍一看這個標(biāo)題，可能會有疑問：v-model和組件也能扯到一起？在打算寫這篇文章的時候，也是這么想的。咱們按簡歷的那一套STAR法則來梳理一下這篇文章：

情景【Situation】：

編寫通用的輸入組件時，子組件要綁定到父組件的某個變量上dataA，當(dāng)父組件要拿到自組件的值時不能通過this.$children.xxx取值然后付給dataA，

而是父組件可以直接this.dataA就可以取到當(dāng)前子組件最新值。

任務(wù)【Task】：

實(shí)現(xiàn)在父組件直接this.dataA就可以取到當(dāng)前子組件最新值。

行動【Action】：

首先要了解v-model這個指令，許多認(rèn)真閱讀過完整vue文檔的同學(xué)可能已經(jīng)知道了關(guān)于v-model。

v-model官方給出的說發(fā)是：這其實(shí)是一個簡寫的形式，v-model實(shí)際執(zhí)行的是下面的綁定：

<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />

v-model是動態(tài)綁定值到value，然后監(jiān)聽input的inpit事件獲取值后賦給dataA的一個過程。

在說一下input的value屬性，在組件內(nèi)部要定義一個value的props屬性，以便能夠動態(tài)綁定上父組件傳過來的值；

組件內(nèi)部還要做一件事情：

動態(tài)計(jì)算（獲取和設(shè)置）currentValue的值，用到了vue的對象的get和set函數(shù)；

講到這里，我們就可以解決上面的問題了；

首先定義一個通用輸入組件：

Vue.component('my-component',{
 template:'<div><input type="text" type="text" v-model="currentValue"/></div>',
 data:function(){
 return {
  // 雙向綁定值-必須
  currentValue:this.value
 }
 },
 props:['value'],// 設(shè)置value為props屬性-必須
 computed:{
 currentValue: {
  // 動態(tài)計(jì)算currentValue的值
  get:function() {
  return this.value;
  },
  set:function(val) {
  this.$emit('input', val);
  }
 }
 }
})

在Html里綁定到vue實(shí)例的一個字段上；

 <div id="demo_01">
 <my-component v-for="(val,key) in postData" v-model="postData[key]"></my-component>
 <button @click="showValue">打印對象值</button>
 </div>

實(shí)例里寫一個方法

打印一下我們綁定的值；

var demo_01 = new Vue({
 el:'#demo_01',
 data:{
 postData:{
  name:'李雷',
  age:'80',
  describ:'這是一個傳奇的人物'
 }
 },
 methods:{
 showValue:function(){
  console.log(this.postData)
 }
 }
});

是不是以后就不用繁瑣冗長的this.$children.xxx取值方式了？

結(jié)果【Result】：

提供了有效的解決了關(guān)于輸入類組件取值方案，并且已經(jīng)部署實(shí)施。

總結(jié)

以上就是關(guān)于vue2.0 組件和v-model的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的幫助。

您可能感興趣的文章: