美文网首页
Vue2的几个开发技巧

Vue2的几个开发技巧

作者: 吞风咽雪 | 来源:发表于2022-05-26 14:37 被阅读0次

    1. 优雅更新props

    子组件是不允许更改 props 的,所以我们想要改 props的话,可以这么做

    • parent.vue
    <child :title.sync="title" />
    
    • child.vue
    export default {
      prop:{
        title:String
      },
      methods:{
        changeTitle(){
          this.$emit('update:title','hello world')
        }
      }
    }
    

    2. 监听组件生命周期

    <child @hook:mounted="listenMounted" />
    

    3. 程序哈的时间侦听器

    export default {
      mounted(){
        const timer = setInterval(()=>{
          console.log('hello world')
        })
        this.$once('hook:beforeDestroy',()=>{
          clearInterval(timer)
        })
      }
    }
    

    4. 过滤器的复用

    //全局的也能获取到,因为全局filters在 this.$options.filters.__proto__...上
    export default {
      filters:{
        formatTime(){
          return '00:00:00'
        }
      }
      mounted(){
        const time = this.$options.filters.formatTime()
      }
    }
    

    相关文章

      网友评论

          本文标题:Vue2的几个开发技巧

          本文链接:https://www.haomeiwen.com/subject/bwkrprtx.html