VueJS $watch $refs [英] VueJS $watch $refs

问题描述

是否可以$watch Vue $refs?

我想针对嵌套在当前 Vue 实例中但在 ready 回调中的子组件设置逻辑，$refs.childcomponent 最初是 undefined 在处理过程中.

I'm wanting to set logic against a child component that is nested inside my current Vue instance but inside the ready callback, $refs.childcomponent is initially undefined while it's processed.

内部 ready()

this.$watch('$refs', function() {
    console.log("not firing");
}, { deep: true });

结果:错误:超出最大调用堆栈

Result: Error: Maximum call stack exceeded

watch 实例的属性

watch property of the instance

watch: {
  '$refs': {
     handler: function() { console.log("hit"); },
     deep: true
  }
}

结果:没有.

推荐答案

您可以 $watch $refs.. 但不能 $refs. 本身，更不用说 $refs.

You can $watch $refs.<name>.<data> but not $refs.<name> itself, not to mention $refs.

https://jsfiddle.net/kenberkeley/9pn1uqam/

const Counter = {
  data: () => ({
    i: 0
  }),
  template: `<fieldset>
    <p>Counter</p>
    <code>i = {{ i }}</code>
    <button @click="i += 1"> Add One </button>
  </fieldset>`
}

const App = {
  components: { Counter },
  mounted () {
    this.$watch(
        () => {
            return this.$refs.counter.i
        },
      (val) => {
        alert('App $watch $refs.counter.i: ' + val)
      }
    )
  },
  template: `<fieldset>
    <p>App</p>
    <counter ref="counter" />
  </fieldset>`
}

new Vue({
    el: '#app',
    render: h => h(App)
})

这篇关于VueJS $watch $refs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！