Question

我有一个初学者的问题。也许我太愚蠢了。

情况：我有一个界面，可以通过滑块设置警报计时器值。每次更新值时，都会将其记录到文件中。但是，当我设置间隔时，我无法从回调函数访问所监视的变量，请参阅timeCallback（）。

Vue.component('alarm-comp', {
  data: function() {
    return {
      data: {
        wakeup: {
          text: "Get up",
          time: 30, //timeout
        },
        ...
      },
      test: "test",
      ...
    },
  watch: {
    data: {
      handler(val) {
        this.saveSettings(); 
      },
      deep: true
    }
  },
  mounted: function() {
    this.readSettings();
    setInterval(() => {this.timerCallback()}, (this.data.wakeup.time) * 1000); // -> time correctly set
  },
  methods: {
    timerCallback() {
      console.log(this.test); // -> test
      console.log(this.data.wakeup.time); // -> undefined
    },
  }

Answer 1

嗨，玛格，欢迎您来此。

在VueJS中，信息通过props被向下传递到组件，并通过发出事件被向上传递给父组件。如果您希望父组件知道间隔何时结束，则应向上发出该事件。

查看以下示例：https://codepen.io/bergur/pen/jjwZxO?editors=1010

在我的警报组件中，主要是

mounted() {
    setInterval(() => {
        this.$emit('finished', this.wakeup.text)
        }, (this.wakeup.time) * 1000
      );
  },

在这里，我创建了一个完成事件，该事件发送唤醒文本（请注意，我删除了多余的数据包装器）

在我的父对象中，我听那个事件

<Alarm @finished="logMessage" />

logMessage所做的就是这样：

methods: {
    logMessage(msg) {
      console.log('the alarm has finished and sent this message: ', msg)
    }
  },

请注意，setInterval会多次发出事件。

Answer 2

自昨天以来，我一直在试图弄清楚它，由于某种原因，您的代码没有执行挂接的钩子，我只是复制了您的代码（在观看之前缺少一个右括号，也许只是示例代码）而意识到如果您将安装的钩子更改为创建的其他钩子，至少在我的示例中，这将触发并起作用。

created() { this.readSettings(); setInterval(() => {this.timerCallback()}, (this.data.wakeup.time) * 1000); }

您真的需要挂接的钩子吗，还是可以更改为已创建的钩子？

从监视的变量获取数据

2 个答案: