1、添加组件
<template>
<u-number-box v-model="internalValue" @change="valChange">
<view slot="minus" class="minus">
<u-icon name="minus" size="12" color="#FFFFFF"></u-icon>
</view>
<text slot="input" class="input">{{ internalValue }}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
</view>
</u-number-box>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 1,
},
user_index: {
type: Number,
default: 1,
},
},
data() {
return {
internalValue: this.value,
};
},
watch: {
value(newVal) {
this.internalValue = newVal;
}
},
onLoad(option) {
console.log(option);
},
methods: {
valChange(e) {
this.$emit("update:value", {
value: e.value,
userIndex: this.user_index,
}); // 触发事件,传递新值
}
},
};
</script>
<style lang="scss" scoped>
@import "/static/css/common.css";
.minus {
width: 0.8rem;
height: 0.8rem;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(196, 152, 74);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-right: 2px;
}
.input {
width: 0.8rem;
height: 0.8rem;
font-size: 16px;
color: #ffffff;
background-color: rgb(196, 152, 74);
display: flex;
justify-content: center;
align-items: center;
margin-right: 2px;
}
.plus {
width: 0.8rem;
height: 0.8rem;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(196, 152, 74);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
</style>
2、在父组件引入组件
import customNumber from "@/components/number-box/number-box.vue";
//添加以下部分
components: {
customNumber,
},
3、在父组件中使用
<custom-number :value="re_obj.point" :user_index="re_obj_index" @update:value="updateUserPoint"></custom-number>
4、在父组件的js中添加回调函数,用来更新父组件的值
updateUserPoint({
value,
userIndex
}) {
// 接收子组件传递的新值
console.log(value, userIndex);
this.questionFormData.re_obj_list[userIndex].point = value;
console.log(this.questionFormData);
},