近期vue开发相关问题

时间:2022-07-23
本文章向大家介绍近期vue开发相关问题，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

问题一: 子组件传值给父组件,当使用elementUI是,modal弹框中需要一个form表单,所以我把form表单单独抽出来当组件,这时就需要在表单提交成功或者取消表单的时候,触发父组件的modal弹框关闭.

解决: 通过子组件配置$emit,第一个参数时事件名,用于父组件回调,第二个参数是要传给父组件的回调值,然后父组件配置对应的事件即可,例如 1.子组件

......
<div class="handle-button">
      <el-form-item>
        <el-button type="primary" @click="uploadSubmit('ruleForm')">保存</el-button>
        <el-button @click="closeTheModal">取消</el-button>
      </el-form-item>
</div>
......
closeTheModal () {
  this.$emit('close', false)
}
......

2.父组件

......
<upload-form @close="handleUploadFormModal"></upload-form>
......
handleUploadFormModal: function (data) {
  this.uploadShow = data
}
......

参考资料: https://cn.vuejs.org/v2/api/#vm-emit

image.png

问题二: 触发表格中的switch组件,需要表格当前行的值以及switch的改变值,如果直接带值会覆盖掉默认的改变值

解决: 通过带一个$event参数,就时默认的改变值

<el-switch 
    v-model="scope.row.status" 
    active-value='1' inactive-value='0' 
    @change="changeUserStatus($event, scope.row)">
</el-switch>

参考资料: https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95

问题三:过滤器的使用,请求的数据放入表格,有些数据后台只是传来对应的id,需要使用过滤器来将其转换成需要的值

解决: 例如下面写的过滤在线状态的过滤器,

const myFilter = {
  toOnline: function (online) {
    switch (online) {
      case 'Y':
        return '在线';
      case 'N':
        return '不在线';
      default:
        return 'NaN';
    }
  }
}
export default myFilter

也可以使用对象的写法,如下

const myFilter = {
  toOnline: function (online) {
    let onlineObj = {
      Y: '在线',
      N: '不在线'
    }
    return onlineObj[online]
  }
}
export default myFilter

写完过滤器,需要在main.js中引入

import myFilter from './config/myFilter'
for (let key in myFilter) {
  Vue.filter(key, myFilter[key])
}

参考资料: https://cn.vuejs.org/v2/guide/filters.html#ad

问题四: element分页请求相关,分页请求,防抖请求

解决: 分页请求可以直接拼接,如下

methods: {
  getData: function() {
    this.$request({
      url: `/api?page=${this.page}&size=${this.size}`
    })
   }
}

这样写,如果带参多了会很麻烦,所以可以写一个计算属性

data: {
  query: {
    page: 1,
    size:10
  }
},
computed: {
  queryString: function() {
    Object.key(query).filter(key => query[key] !== '')
              .map(key =>  `${key}=${query[key]}`)
              .join('&')
  }
}

防抖可以使用lodash的_.debounce方法

_.debounce( this.getData(), 800)

参考资料: https://lodash.com/docs/4.17.10#debounce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

问题五: elementui中popover组件无法再表格中直接使用

解决: 直接把popover单独封装成组件,再引入表格即可

随机文章
Javascript知识点必读
最近更新