<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>