Vue 日常开发问题记录（1）

给你一棒槌
441 阅读1分钟

记录开发中日常遇到的一些问题，持续更新...

传额外参数问题

  • 第一种: 属性的值是函数
<el-upload
            ref="elUpload"
            class="v-flex-left upload-image"
            :headers="{Authorization:$store.getters.token}"
            :action="$serve.commonUpload"
            :limit="3"
            :fileList="fileList"
            :show-file-list="false"
            :accept="videoAccept"
            :on-success="handleFastDfsSuccess"
            :on-progress="handleFastDfsProgress"
            :on-exceed="handleFastDfsExceed"
            :before-upload="file=> beforeFastDfsUpload(file,videoAccept)"
            :data="{corpid:$store.getters.corpid}"
          >
            <div class="upload-btn v-flex-center">+视频</div>
          </el-upload>
  • 第二种 自定义事件

juejin.cn/post/684490…

  1. 子组件传出单个参数时：
// 子组件
this.$emit('test', param)
// 父组件
@test='test($event, otherParams…)'
  1. 子组件传出多个参数时：
// 子组件
this.$emit('test', param1, param2, …)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments, otherParams…)'
  1. 箭头函数转化（子组件传出单个、多个都适用）
// 子组件
this.$emit('test', param)
// 父组件
@test='(param) => {test(param, otherParams…)}'

vue初始化值

组件传递函数

  1. 父组件传递给子组件函数
<DeptSelect
      :isFeishu="true"
      :disableNode="disableNode"
      :checkedIds="checkedIds"
      @change="onDeptListChange"
    >
      <template #action>
        <div class="dept-add v-flex-center f-csp">
          <i class="el-icon-plus" />
          <slot>按员工选择</slot>
        </div>
      </template>
    </DeptSelect>
  1. 子组件调用传递过来的函数，还可以传参
props:
disableNode: {
      type: Function,
      default: () => false
    },

 <!-- 使用    -->
  this.disableNode(userItem, disabled, child)
  1. 在父组件内部处理函数具体逻辑
disableNode (node, dis, originNode) {
      return dis || (node.type === 'dept' && !originNode.children?.length && !originNode.users?.length)
    }

路由

  1. 路由的钩子函数在组件的周期函数之前执行
导航行为被触发，此时导航未被确认。
在失活的组件里调用离开守卫 beforeRouteLeave。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件（如果有）。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)，标示解析阶段完成。
导航被确认。
调用全局的 afterEach 钩子。
非重用组件，开始组件实例的生命周期

beforeCreate&created
beforeMount&mounted
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
导航完成

易错点

  1. 通过this.$refs获取dom 有时出现underfined
    • 描述：通过$refs 获取的dom外层有v-if包裹，如果初始化v-if的值为true 那么就可以获取到，不会出现underfined 如果是false 就会获取不到dom，还有一种情况是 v-if 的值是根据请求回来的数据来判定的 那么在created 或者mounted 中也会出现获取不到的情况，这种情况下有两种解决方案
      1. 通过setTimeout
      2. 在updated 钩子里获取
  2. el-popover 组件中reference(触发 Popover 显示的 HTML 元素) 事件不生效
    • 原因是<div slot="reference" class="more f-csp" v-if="dataList.length > limit">...</div>使用了v-if导致触发元素<div data-v-4b258a58="" class="more f-csp el-popover__reference" aria-describedby="el-popover-8040" tabindex="0">...</div>没有正确设置应有的属性 解决方案：1. 加载这个组件之前确保v-if的值为true 2. 用v-show代替v-if
  3. vue组件中如果data中数据太多可以提取到一个单独文件中，主文件中只保留主要逻辑，计算属性，watch 等也可以这样做
export default {
  name: 'TaskCenter',
  components: {},
  data () {
    return {
      reqUrl: this.$serve.getDyTaskList,
      ...JSON.parse(JSON.stringify(data))//必须深拷贝一份，否则这个地方是一个对象的引用，会发生数据的错乱
    }
  },
  1. vant 的上传组件上传大文件的时候页面崩溃问题
    • 原因是 result-type 默认值是dataUrl 会返回一个file对象和content(base64) 其中content特别大导致页面崩溃 解决方案：result-type 设置为file
  2. vue 路由传参时如果值是数值类型 后面页面刷新或者由别的页面返回，那么再取值的时候值的类型就会变成字符串，所以传参的时候尽量用字符串
avatar
文章
阅读
粉丝