原理：其实是 自定义属性value 和 自定义事件input 的快捷使用。
目的: 这是一个多次出现的组件,因为在项目中多次出现,故对其进行封装,减少代码量功能
功能: 1. 自主发ajax请求，获取数据列表，显示在列表中
2. 给父组件（使用它的那个组件）回传用户选中的频道id（给调用组件的地方返回选中的频道id ）==> 典型的子传父$emit
格式：
// 父组件
data: { return { channel_id: ''}}
// 1\. 使用。 在子组件使用v-model。与在普通表单元素上使用是一样的。
<my-channels v-model="channel_id"></my-channels>
// 2\. 在子组件my-channels的内部：
// （1） 设置一个名为value的属性来获取从父组件传的v-model的初值
// (2) 在某个时间点，触发名为input的事件，来修改父组件中v-model的值
创建组件：MyChannelsVmodel.vue
<template>
<!-- 由于它的根元素是el-form-item，则在使用这个组件时，要用el-form包起来 -->
<el-form-item label="频道">
<!-- clearable： 表示可清空的单选 -->
<!--
change 事件是由el-select组件提供的，当用户的选择发生变化时，它会触发，并传入当前
用户选中的值
-->
<el-select @change="hSelectChange" v-model="channelId" clearable placeholder="请选择频道">
<el-option
v-for="channel in channels"
:key="channel.id"
:label="channel.name"
:value="channel.id"></el-option>
</el-select>
</el-form-item>
</template>
<script>
// 引入方法，发请求，取回数据给channels
import { getArticleChannels } from '@/api/article'
export default {
name: 'MyChannelsVmodel',
props: ['value'],
data () {
return {
channelId: '', // 当前选中频道
channels: [] // 频道列表
}
},
computed: { },
async created () {
const result = await getArticleChannels()
console.log('loadChannels', result)
this.channels = result.data.data.channels
},
// created () {
// this.loadChannels()
// },
methods: {
hSelectChange (val) {
// console.log('hSelectChange', val)
// 抛出事件给父组件
// this.$emit(事件名，参数)
// 事件名input是一个特殊的名字，它会把val值直接设置给父组件中v-model后设置的数据项
this.$emit('input', val)
}
}
}
</script>
