<template> <view class="mine-panel-list"> <view class="mine-panel-item"> <uni-forms ref="mineForm" :rules="mineRules" :modelValue="mineFormData"> <uni-forms-item label="姓名" :required="true" name="name"> <uni-easyinput v-model="mineFormData.name" placeholder="请填写姓名" :clearable="false"></uni-easyinput> </uni-forms-item> </uni-forms> </view> <button type="primary" size="mini" @click="save('mineForm')">保存</button> </view> </template> <script> export default { data() { return { mineFormData: { name: uni.getStorageSync('name') || '', // 从本地存储获取之前保存的姓名 }, } }; }, onReady() { this.$refs.mineForm.setRules(this.mineRules) }, methods: { save(ref) { this.$refs[ref].validate().then(res => { console.log('success', res); uni.setStorageSync('name', this.mineFormData.name); // 将姓名保存到本地存储 uni.showToast({ title: '保存成功' });this.$emit('update-name', this.mineFormData.name); }).catch(err => { console.log('err', err); }) } } } </script>这是mine.vue的代码
时间: 2024-04-22 12:26:26 浏览: 122
感谢提供了`mine.vue`的代码。根据你的代码,我注意到在`mine.vue`组件中,你使用了`uni-forms`和`uni-easyinput`组件来实现表单和输入框功能,并在保存按钮的点击事件中进行了表单验证和保存操作。
根据你的描述,你想要在`home.vue`页面中显示`mine.vue`组件中填入的姓名信息。为了实现这个目标,请按照以下步骤进行修改:
1. 在`home.vue`组件的模板中,将`<mine></mine>`标签放在需要显示姓名信息的位置,例如:
```html
<template>
<div>
<p>{{ mineName }}</p>
<mine ref="mineComponent" @update-name="updateName"></mine>
</div>
</template>
```
2. 在`home.vue`组件的脚本中,添加一个名为`updateName`的方法,用于更新姓名信息:
```javascript
<script>
export default {
data() {
return {
mineName: ''
};
},
methods: {
updateName(name) {
this.mineName = name;
}
}
}
</script>
```
3. 在`mine.vue`组件的保存按钮点击事件中,添加一个触发事件,将姓名信息传递给父组件:
```javascript
methods: {
save(ref) {
this.$refs[ref].validate().then(res => {
console.log('success', res);
uni.setStorageSync('name', this.mineFormData.name); // 将姓名保存到本地存储
uni.showToast({
title: '保存成功'
});
this.$emit('update-name', this.mineFormData.name); // 触发事件,将姓名信息传递给父组件
}).catch(err => {
console.log('err', err);
})
}
}
```
通过以上修改,当在`mine.vue`组件中填入姓名并点击保存后,姓名信息将会传递给`home.vue`组件,并更新`mineName`变量,从而在页面上显示出来。
希望这次能够解决问题。如果还有其他疑问,请随时提出。
阅读全文