最近在写组件时，考虑到子组件的状态需要实时反馈给父组件，于是想起来了v-model，下面介绍一下自定义组件中的简单使用
官网介绍不是很清晰，这个默认的input事件很容易让人产生误解，其实个人建议还是不要使用默认的prop和event，尽量重新定义。
我的子组件
代码语言：javascript复制<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>父组件
代码语言：javascript复制<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>
主要的坑就是变量问题，已经写在子组件里了。比传统的父子组件传值还是更好用的。
