0
点赞
收藏
分享

微信扫一扫

关于 this.$next 的用法

狐沐说 2022-04-30 阅读 84

这个方法适用于 获取数据更新之后的dom 在dom渲染完成后执行

如果一个组件 被注册到了父组件中 如果 子组件写了v-if  则 v-if 一旦变为true 是无法执行组件里的任何方法的  必须通过this。$next  第一此变为true  是无法拿到子组件里的任何属性和方法的

this.$next的执行顺序  不管你监听不见听  父元素的 create beformount 的先执行 然后 子元素声明周期  在父元素的mount 在然后 子元素的监听           在子元素的 生命周期   函数里的console 一定比next执行快

子元素的监听 console打印信息还是比声明周期快的 

 created(){

    this.obj.name="create"

    this.$nextTick(()=>{

      console.log("parent111111111111111111111")

    })

  console.log('888888888888888888create')

  },

   beforeMount(){

     console.log(this.$el,'before')

    this.obj.name="beforemount"

    this.$nextTick(()=>{

      console.log("parent22222222222")

    })

  console.log('888888888888888888beforemount')

  },

     mounted(){

     console.log(this.$el)

    this.obj.name="mounted"

    this.$nextTick(()=>{

      console.log("parent333333333333")

    })

  console.log('888888888888888888mounted')

  }

son

 objs:{

   handler(){

     console.log(this.objs.name)

this.$nextTick(()=>{

  console.log("son1111111111111111")

})

   },

   deep:true,

   immediate:true

 }

  },

  methods: {

  },

  beforeCreate () {

    // console.log(this.age,'mmnnn')

  },

  created () {

    console.log("soncreate")

 this.$nextTick(()=>{

   console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbson22')

 })

  },

  mounted () {

    console.log("sonmounter")

  this.$nextTick(()=>{

   console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbson333')

 })

888888888888888888create
ceshi.vue?0737:88 undefined 'before'
ceshi.vue?0737:93 888888888888888888beforemount
ceshi2.vue?c7f3:56 beforemount
ceshi2.vue?c7f3:82 soncreate
ceshi2.vue?c7f3:88 sonmounter
ceshi.vue?0737:97 <div data-v-4475b032 data-v-7ba5bd90 class=​"q">​…​</div>​
ceshi.vue?0737:102 888888888888888888mounted
ceshi.vue?0737:82 parent111111111111111111111
ceshi.vue?0737:91 parent22222222222
ceshi2.vue?c7f3:58 son1111111111111111
ceshi2.vue?c7f3:84 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbson22
ceshi2.vue?c7f3:90 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbson333
ceshi2.vue?c7f3:56 mounted
ceshi.vue?0737:100 parent333333333333
ceshi2.vue?c7f3:58 son1111111111111111

举报

相关推荐

0 条评论