vue中怎么自定义组件

目录

一：功能描述

二：实现过程

---

一：功能描述

在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。

二：实现过程

首先定义弹框组件

export default class LsUserChange extends Vue {

定义三个变量：

@Prop() value?: number
@Prop() type?: number // 变动类型：1-用户金额
@Prop() userId?: number // 用户id

监听变量，并回调函数赋值

@Watch('userId', {immediate: true
})
getuserId(val: any) {// 初始值//this.form.value = valthis.$set(this.form, 'user_id', val)
}@Watch('value', {immediate: true
})
getValue(val: any) {// 初始值//this.form.value = valthis.$set(this.form, 'value', val)
}@Watch('type', {immediate: true
})
getType(val: any) {// 变动类型：1-用户金额；if (val == 1) {this.typeName = '金额'this.$set(this.form, 'type', val)} 
}

2：调整按钮和调用组件

引用组件：

import LsUserChange from '@/components/user/ls-user-change.vue'

<ls-user-changetitle="余额调整":value="user_info.user_redpacket":type="1":userId="user_id"@refresh="userDetail"
><el-button type="text" slot="trigger" size="small" :disabled="user_info.user_delete">调整</el-button>
</ls-user-change>

这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息

userDetail() {apiUserDetail({user_id: this.user_id}).then((res: any) => {this.user_info = res.user_infothis.transaction = res.transaction}).catch((res: any) => {})
}

3：在余额弹框离调整完余额要调用刷新方法

this.$emit('refresh')