Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
507 views
in Technique[技术] by (71.8m points)

vue中$emit诡异的无法触发问题

今日无意间发现一个 关于 vue $emit的诡异问题: 就是 如果把 this.$emit('xx')放入到 定时器中 或者 放入到 $nextTick中就不会触发相关的父级时间 请问各位大神有没有遇到过类似大问题
网上也看了一些相关答案 都是说作用域啊 大小写相关的原因。首先我的定时器和$nextTick均是箭头函数 不存在作用域问题 即使在外面缓存this传入 依然无法触发 大小写问题已经试过了 没有效果。
还在思否看到三年前有人提出了类似的问题至今还是没有得到解答真的很迷惑!还请各位大神指点!

setTimeout(() => {
              this.$emit('liquidgroup')
            }, 1000);

上面这样就无法触发 很是诡异

this.$emit('liquidgroup')

这样就可以!!!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

貌似并没复现,demo如下。建议题主提供一下能复现的简易版demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible">
  <meta content="webkit" name="renderer">
</head>
<body>
<div id="app">
  <test-emit @change="changeHandler"></test-emit>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  Vue.component('test-emit', {
    methods: {
      clickBtn () {
        setTimeout(() => {
          console.log('触发定时器')
          this.$emit('change')
        }, 1000)
        this.$nextTick(() => {
          console.log('触发nextTick')
          this.$emit('change')
        })
      }
    },
    template: '<button @click="clickBtn">点我</button>'
  })
  
  new Vue({
    el: '#app',
    methods: {
      changeHandler () {
        console.log('触发父组件方法')
      }
    }
  })
</script>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...