自定义教师组件，组件改变后的实时搜索，路径别名

vue定义路径的别名

在vue.config.js文件中 resolve: { alias: {}}的属性中定义，如下图

alias的代码

resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud'),
        '@self': resolve('src/views/components/SelfDefined')
      }
    }

封装组件

需求

调用api接口，按类型查询老师，设置默认值，并监听老师的变化

重点的知识点及原理

修饰符.sync
由于props数据的单向性，从父组件传到子组件的数据，子组件如果修改了项目还可以运行浏览器上会报错，加上.sync后子组件内部改变props属性值并更新到父组件中

<child :name.sync="name"></child>  // 父组件
// :name.sync就是:name="name" @update:name="name = $event"的缩写
// <child :name="name" @update:name="name = $event"></child> 
// 子组件事件
changePropsInChild(){
   this.$emit('update:name', 'I am from child');
}

老师组件的源码

<template>
  <el-select v-model="currentvaluePrm" filterable clearable :placeholder="placeholderPrm" @change="teachersChange">
    <el-option
      v-for="item in teacherList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { getTeacherAll } from '@/api/teacherManage/teacherManagement'
export default {
  name: 'Teachers',
  data() {
    return {
      teacherList:[],
      currentvaluePrm: this.valuePrm, // 绑定值
    }
  },
  mounted() {
    this.getTeacherAllFun()
  },
  props:{
    valuePrm:{
      type: String,
      default: ''
    },
    teacherType:{
      type: String,
      default: ''
    },
    placeholderPrm:{
      type: String,
      default: '请选择'
    }
  },
  watch: {
    valuePrm(val) {
      this.currentvaluePrm = val || ''
    },
    currentvaluePrm(val) {
      this.$emit('update:valuePrm', val)
    },
  },
  methods:{
    // 获取老师
    getTeacherAllFun(){
      let prm={}
      // teacherType为6是教务老师,空-默认为全部
      const num=this.teacherType
      if(num){
        prm={departmentId:Number(num)}
      }
      getTeacherAll(prm).then(res=>{
        this.teacherList= res
      })
    },
    teachersChange(val){
      this.$emit('teachersChange',val)
    }
  }
}
</script>

<style>
</style>

组件的应用

引入及注册

import Teachers from '@self/Teachers'
components:{Teachers}

使用

<Teachers :valuePrm.sync="form.teacherId" teacherType="6" @teachersChange="changePrm"></Teachers>

监听方法

methods:{
	changePrm(val){
      this.form.classId=null
      this.classByTeacherDialogList=[]
      this.form.classWeek=null
      this.form.startTime=null
      this.form.endTime=null
      this.form.schedule=null
      this.listByTeacherDialogFun(val)
    },
}

组件改变后的实时搜索

【应用背景】教师组件放在查询时，需求是当选择了要查询的教师后，自动查询表格的数据，并且该页用到了多处，将@change的方法

父组件template

$event对应的val2，如果teachersChange不传参，默认是select的val

<label class="el-form-item-label">授课老师</label>
<Teachers :valuePrm.sync="query.teacherId" teacherType="6" style="width: 130px;" class="filter-item" @teachersChange="teachersChange('teacherId',$event)"></Teachers>

父组件script

val为要改变的字段，$event对应的val2是教师的id

teachersChange(val,val2){
  // console.log(val,val2)
  // debugger
  this.query[val]=val2
  this.$forceUpdate()
  this.crud.toQuery()
},