项目场景：
做的后台项目中因为涉及不同国家的业务，所以许多地方需要国家的选择条件，为了不重复的使用代码，决定对选择框进行一个二次封装，并且今后如果在加新的国家的话也不用每个文件里去改
问题描述
提示：这里描述项目中遇到的问题：
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：
@Override
public void run() {
bytes = mmInStream.read(buffer);
mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
}
解决方案：
首先新建一个文件夹在
components下面，起名字为chooseCountry，里面新建一个index.vue文件
注册组件
有两种选择：全局or局部引入，在这里我为了方便使用，注册了全局组件
在
main.js文件中引入组件并注册
import chooseCountry from './components/chooseCountry/index.vue' // 按照你自己的路径
Vue.component('chooseCountry', chooseCountry) // Vue.component('名字', 事件)
Vue.use(chooseCountry)
如果是局部引入就这样写
import chooseCountry from './chooseCountry' // 按照你自己的路径
export default {
components: {
chooseCountry
}
}
这是封装的组件的代码
<template>
<el-select
v-model="newCountry"
:placeholder="placeholder"
@change="choose()"
>
<el-option
v-for="item in countrys"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
export default {
// 因为是子组件，所以需要写props接收父组件传过来的值
props: {
country: {
type: String,
default: '' // 这个是设置初始值，建议为空，用父组件传来的值方便一些
},
placeholder: {
type: String,
default: ''
}
},
data() {
return {
newCountry: '',
countrys: [
{
value: 'China',
label: '中国'
},
{
value: 'England',
label: '英国'
}
]
}
},
watch: {
// 监听一下父组件是否有初始值传过来
country: {
deep: true,
immediate: true,
handler: function(val) {
this.newCountry = val
}
}
},
methods: {
// 改变选项的时候 把值传给父组件
choose() {
this.$emit('chooseCountry', this.newCountry) // emit事件通知父组件
}
}
}
</script>
chooseCountry 是父组件中的事件，需要同名才能识别
这是父组件中应用的代码
<template>
<div>
<chooseCountry
:country="country"
placeholder="请选择"
@chooseCountry="chooseCountry"
/>
</div>
</template>
<script>
export default {
data() {
return {
country: 'China'
}
},
methods: {
// 国家组件的返回，用来接收返回的值，然后赋给页面上绑定的值
chooseCountry(data) {
this.country = data
}
}
}
</script>