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 = val
    this.$set(this.form, 'user_id', val)
}

@Watch('value', {
    immediate: true
})
getValue(val: any) {
    // 初始值
    //this.form.value = val
    this.$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-change
    title="余额调整"
    :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_info
            this.transaction = res.transaction
        })
        .catch((res: any) => {})
}

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

this.$emit('refresh')