使用

<getRole :roleId="userInfo.userRoleId"></getRole>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: getRole
* @Date: 2022-05-18
* @Desc: 请求接口并计算属性
*/
<template>
  <div>
    {{ name }}
  </div>
</template>

<script>

import {getDropList} from "../api/api/user";

export default {
  name: "getRole",
  components: {},
  props: {
    roleId: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      roleList: []
    }
  },
  watch: {},
  mounted() {
    this.getDropList()
  },
  computed: {
    name() {
      var name = ''
      this.roleList.forEach((type) => {
        if (this.roleId == type.id) {
          name = type.roleName
        }
      });
      return name
    }
  },
  methods: {
    getDropList() {
      var that = this
      getDropList({}).then((res) => {
          if (res.code == 1) {
            that.roleList = res.data
          }
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>

</style>