美文网首页
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