vue常用方法

 

#default="scope"

 

css 穿透

/*   ::v-deep */
::v-deep .类名 {
}

 

子组件列表形式方法多加参数

@input="($event)=>{gorinput($event,item)}"

 

引入本地文件

require()

 

获取原始数据

// 访问初始值
this.$options.data().xx

 

 

dom 渲染后执行

//dom渲染完执行
this.$nextTick(() => {})

 

 

子组件调用父组件的事件

//调用父组件的事件
this.$parent.xx

 

 

父组件调用子组件的事件

// 子组件
<Foods ref="foods"></Foods>
// 调取
this.$refs.foods.show()

 

路由跳转传参

 //跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三'，
    id: 1,
  }
})

//跳转后页面获取参数对象
this.$route.query

// ---------------------------------------------------------------

//跳转时页面
this.$router.push({
  name: 'Detail',
  params: {
    name: '张三'，
    id: 1,
  }
})

//跳转后页面获取参数对象
this.$route.params

// ---------------------------------------------------------------------

    // 3. 直接跳转(返回上一级或者往前一级)
        router.go(1)//在浏览器记录中前进一步，

        router.go(-1)// 后退一步记录，等同于 history.back()

        router.go(3)// 前进 3 步记录

 

 

发送验证码

<el-button :disabled="codeDisabled" @click="sendVerification"
  >{{send}}</el-button
>
<script>
     data() {
         return {
             timer: null,
             send: '获取验证码',
             countdown: 60,
             codeDisabled: false
         }
     },
  // 发送验证
     sendVerification() {
       Passwordcode({
         phone: this.Form.phone,
         smsMsgType: 'FORGET_THE_PWD_TYPE'
       }).then(res => {


         this.codeDisabled = true
         if (res.code == '200') {
           if (!this.timer) {
             this.timer = setInterval(() => {
               if (this.countdown > 0 && this.countdown <= 60) {
                 this.countdown--
                 if (this.countdown !== 0) {
                   this.send = '重新发送(' + this.countdown + ')'
                 } else {
                   clearInterval(this.timer)
                   this.send = '获取验证码'
                   this.countdown = 60
                   this.timer = null
                   this.codeDisabled = false
                 }
               }
             }, 1000)
           }
         } else {
           this.codeDisabled = false
           this.$message({
             message: res.errMsg,
             type: 'warning'
           })
         }
       })
     }
</script>