javascript - Vue 组件 prop 未定义

Question

遗憾的是我对 Vue 不太熟悉，希望有人能帮助我......

我的index.html中有这个:

<xyz :isHidden="hidden">...</xyz>

现在，我有了 xyz 组件:

Vue.component('graph', {
  props: ['isHidden'],
  watch: {
    isHidden() {
     doSomething(this.isHidden);
    }, ...
  }
....
}

然后，我有了我的 Vue 应用程序:

let app = new Vue({
  el: '#root',
  methods: {
    action() {
      this.hidden = !this.hidden;
    }, ...
  }, ....
  data: { hidden: false }
})

现在，据我了解 :hidden="isHidden" 部分应该将不同部分中的两个变量绑定(bind)在一起，对吗？因此，当我更改 isHidden 时，它也应该更改 hidden 并因此调用执行某些操作的监视函数。但事实证明它并没有..当我的组件加载时 hidden 是未定义的..

我是不是忘记了什么？或者我的错误可能出在我的代码的“...”部分？ .-.

Answer 1

哦，等等......现在我觉得很愚蠢......

好吧，还有其他人在挣扎:Vue-HTML 中没有大字母(camelCase)..

固定 HTML:

<xyz :is-hidden="hidden">...</xyz>

其余部分保持不变..