vue学习记录

一、toDoList练习

1. 同级组件之间传值

• 功能描述：实现点击全部任务 未完成任务 已完成任务按钮的过滤。需要点击全部任务的时候（mainPanel.Vue）去将过滤后的数组传给另一个子组件(Lists.Vue)去渲染。
  1.在src目录 创建公共组件eventBus.js（创建一个空的Vue实例）代码：

  import Vue from 'vue'
  export default new Vue()
  

  2. mainPanel.Vue传值

  methods: {
    send: function () {
      bus.$emit('sendTasks', this.filters)
    }
  }
  

  根据功能描述可知：应该在以及重新渲染任务列表
  因此调用方式如下：

   mounted () {
      this.send()
    }
   this.show = 'all'
      this.send()
    },
    unCompleted: function () {
      this.send()
    },
    completed: function () {
      this.send()
    }
  

  3. Lists.Vue接收数据

   mounted/created () {
      let self = this
      bus.$on('sendTasks', function (val) {
        self.temp = val
      })
    }
  

二、项目学习(element的表单验证rules使用)

1.表单验证的功能，需要只通过rules属性传入约定的验证规则，并将表单项的prop属性设置为需校验的字段名即可

2. 主要在这里写validator用法(使用TypeScript)：

private rules: any = {
    auth_timeout: [
      { required: true, message: '请输入认证超时时间' },
      { type: 'integer', min: 10, max: 180, message: '认证超时时间范围在 10~180', validator: this.limit, trigger: 'change' }
    ]}
//validator的逻辑不要和预定义的校验方法冲突
//自定义的方法一般不能return true/false(如果你的组件是嵌套的，那么父组件调用你的组件的验证方法(validate())时会导致很多错误冲突) 校验结果只能用(也必须用)callback()/callback(new Error('错误结果'))
private limit(rule: any, v: number, callback: any) {
    if (v >= rule.min && v <= rule.max) {
      callback();
    } else if (v > rule.max) {
      let flag = rule.field;
      this.serviceTplTypeForm[flag] = Math.floor(v / 10);
      callback(new Error());
    } else {
      callback(new Error());
    }
  }

private checkValidate() {
    (this.$refs.dot1xCfg as ElForm).validate((valid: any) => {
        return valid;
    });
  }
//rule：源描述符中与要验证的字段名称相对应的验证规则。
//v：正在验证的源对象属性的值。
//callback：验证完成后要调用的回调函数。它期望传递一个Error实例数组以指示验证失败。如果检查是同步的，则可以直接返回false或Error或Error Array

三、el-tooltip 如何换行，或者使用列表格式显示提示信息

<el-tooltip placement="bottom">
  <el-button>Bottom center</el-button>
  <div slot="content">多行信息<br/><ul><li>第二行信息</li></ul></div>
</el-tooltip>

四、切换组件时重新加载页面

1.app.vue页面

    <keep-alive>
      <router-view></router-view>
    </keep-alive> 

2.被切换的组件
钩子activated(keep-alive组件激活时调用)

activated () {
    //页面重新加载时执行的函数
 }