前端代码简洁封装(个人向)

IE不懂人心

已于 2022-06-27 16:42:02 修改

阅读量411

点赞数

文章标签：前端 javascript

于 2022-06-27 14:32:23 首次发布

本文链接：https://blog.csdn.net/qq_16828495/article/details/125423545

版权

这篇博客介绍了Vue中父子组件的数据传递与方法调用，包括`.sync`修饰符的使用和计算属性的设定。同时讲解了全局API和配置的注册，以及错误处理和响应拦截器的实现。此外，还展示了动态注册组件和数据结构处理的方法。

摘要由CSDN通过智能技术生成

父传子定义

//父组件使用.syc
<component :is-show.sync="item.showName" :is="item.name" :key="item.name" />

//子组件接收并使用计算属性
 props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isShowReport: {
      get() {
        return this.isShow;
      },
      set(val) {
        this.$emit("update:isShow", val);
      },
    },
  },
  //可直接反向赋值

父子方法调用

//子组件使用$parent来调用
 this.$parent.init()
 //父组件使用ref
 this.$ref.(方法名)

main.js

//快速调用
import api from '@/api'
import config from '@/config';
// 注册全局api
Vue.prototype.$api = api
// 注册全局config
Vue.prototype.$config = config;

结构对象

//不易报错
const {success , data: { contents = {}, count = '' },} = res.data || {};
//或使用
data?.data?.count

响应拦截处理

  instance.interceptors.response.use(res => {
      const { data, status } = res
      if (Object.prototype.toString.call(data) === '[object Object]' && data.hasOwnProperty('success') && !data.success) {
        if (!data.message) {
          return Promise.reject(data)
        }
        if (data.code === "500") {
          Notice.error({
            title: ,
            desc: ''
          })
        }
        if (data.code === "110003"){
          // 超时状态码 重定向到login
            Vm.$router.push({
              name: "login"
            });
            return Promise.reject(data)
        }
        Notice.error({
          title: Error,
          desc: data.message
        });
        return Promise.reject(data)
      }
      return { data, status }
    }, error => {
      let errorInfo = error.response;
      switch (errorInfo && errorInfo.status) {
        case 401:
          Vm.$router.push({
            name: "login"
          })
          break
        case 403:
          Notice.error({
            title: ,
            desc: ''
          });
          break
        case 404:
          break
        case 500:
          Notice.error({
            title: ,
            desc: ''
          });
        case 502:
          Notice.error({
            title: ,
            desc: ''
          });
      }
      return Promise.reject(error)
    })
  }

注册组件

//尽量使用数据来注册
	<template v-for="item in quickMenu">
      <component :is-show.sync="item.showName" :is="item.name" :key="item.name" @click="item.action()" />
    </template>

quickMenu: [
			{
				menuName: 'my_favorite',
				isShowMenu: true,
				jumpRoute: '/myFavorite/my_favorite',
				action: () => this.$router.push('myFavorite/my_favorite')
			},
			{
				menuName: 'submit_feedback',
				isShowMenu: true,
				action: () => this.isShow = true
			}
		]