cms之day4( vue、ant design vue自定义验证model form、路由守卫；session与token登录鉴权)

day4

1. axios ant-design vue前端

1. vue父子组件传值

1. 子传父

   // 子组件 search.vue 提交时emit
   
   handleSubmit() {
        
         // 传递name至父组件
         this.$emit('searchName', this.search.name)
       }
   

   // 父组件 manageList.vue
    <search v-on:searchName="getSearchName" />
      getSearchName(name) {
        
         console.log(name)
       }
   

2. 父传子

   今天暂时没用到，链接粘在这里 可可爱爱

   传送门

2. vue之watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

 watch: {
   
            num(newVal, oldVal) {
   
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }

 watch: {
   
            num: {
   
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
   
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

 watch: {
   
            num: {
   
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
   
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
                deep:true
            }
        }

3. watch和computed区别

watch 观察监听页面上的vue实例. eg.const vm=new vue({}),当需要在数据变化响应时，执行异步操作，或高性能操作，选择watch。

computed:关联多个实时计算的对象，当这个对象中的其中一个改变时都会触发这个属性；具有缓存能力。

4. ant deisgn vue使用model form时自定义验证

// addManager.vue 
rules: {
   
        mobile: [{
    required: true, trigger: ['change', 'blur'], validator: tools.validatorMobile }],
        email: [{
    required: true, trigger: ['change', 'blur'], validator: tools.validatorEmail }]
      },
       psw: [{
    required: true, trigger: ['blur', 'change'], validator: tools.validatorPsw }],

// too.js
// 验证手机号 FormModel
  validatorMobile(rule, value, callback) {
   
    // 如果为空值，就抛出错误
    if (!value) {
   
      callback(new Error('请输入手机号!'))
    } else {
   
      // 正则判断手机号格式的格式，正则判断失败抛出错误，否则直接callback()
      if (!/^1[2-9]\d{9}$/