vue v-model 簡單使用

　最近在寫組件時，考慮到子組件的狀態須要實時反饋給父組件，因而想起來了v-model，下面介紹一下自定義組件中的簡單使用

 

官網介紹不是很清晰，這個默認的input事件很容易讓人產生誤解，其實我的建議仍是不要使用默認的prop和event，儘可能從新定義。

個人子組件

<template>
  <div>
    <el-select v-model="id" style="margin-bottom:20px" @change="handleChange" :multiple="multiple">
        <el-option class="item" v-for="item in channelArr" :key="item.channel" :label="item.channel + ' ' + item.name" :value="item.channel">
          <div v-if="item.pic"><img class="item-icon" :src="item.pic" alt=""><span>{{item.channel + ' ' + item.name}}</span></div>
        </el-option>
    </el-select>
  </div>
</template>

<script>
  import {
    getChannelAPI,
  } from '@/api/data'
export default {
 name: 'UserChannel',
 model: {
    prop: 'id', // 坑點 這裏官方文檔和props是一個名字，都是checked 但在使用過程當中會報錯，多番排查後， 將model裏的prop新定義一個名字，爲了保證和props裏父組件傳過來的channelId一致，在子組件data中進行賦值，就再也不報錯了。
    event: 'change' // event 名稱能夠隨便起 emit 裏對應就行，這裏配合業務起的是change 
  },
// 若是model不寫就會走默認的model prop：value , event : input 不要被input所迷惑，並不必定表明js的oninput事件
  props: {
    hasChange:{
      type: Boolean,
      default: false
    },
    channelId:{
      type:String,
      default:''
    },
    multiple:{
      type:Boolean,
      default:false
    }
  },
 data() {
      return {
        channelArr: [],
        id:this.channelId
      }
    },
    created(){
      this.getChannel()
    },
    methods: {
      getChannel() {
        if (this.channelArr.length == 0) {
          getChannelAPI().then(response => {
            this.channelArr = response.data.channeArr;
          });

        }
      },
      handleChange(event){
        // this.$emit('someProp', [returnValueToParent])  returnValueToParent 是什麼，父組件的v-model 就是多少
        this.$emit('change', event);
        if(this.hasChange){
          this.$emit('fetch', event)
        }
      },
    }
}
</script>
<style scoped>
.item{
  margin-bottom: 6px;
}
.item-icon{
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 20px;
}
</style>

父組件

<template>
    <div>
       <user-channel v-model="channel"></user-channel>
　　　　
    </div>
<template>

<script>
  import UserChannel from '@/components/UserChannel'
  export default {
    components:{
      UserChannel
    },
    data() {
        return {
          channel:''        
    }
    ...... 
</script>
    

主要的坑就是變量問題，已經寫在子組件裏了。比傳統的父子組件傳值仍是更好用的。