プロジェクトのシナリオ:
バックエンド プロジェクトにはさまざまな国でのビジネスが含まれるため、多くの場所で国の選択条件が必要になります。コードを繰り返し使用しないように、選択ボックスを再パッケージ化することにしました。将来新しい国を追加する場合、選択ボックスは必要ありません。毎回使用するため、ファイル内で変更します
問題の説明
提示：这里描述项目中遇到的问题：
例: データ送信中に時々データが失われ、場合によってはデータの一部が失われることがあります
。APP でデータを受信するためのコード:
@Override
public void run() {
bytes = mmInStream.read(buffer);
mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
}
解決：
まず、以下に新しいフォルダーを作成し
components、名前を付けchooseCountry、その中に新しいindex.vueファイルを作成します
レジスタコンポーネント
グローバルまたはローカルインポートの 2 つのオプションがあります。ここでは便宜上グローバルコンポーネントを登録しました。
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>