Vue组件道具未定义答案

【问题标题】：Vue component prop undefinedVue组件道具未定义
【发布时间】：2020-08-03 10:30:41
【问题描述】：

遗憾的是我对 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" 部分应该将不同部分中的两个变量绑定在一起，对吗？因此，当我更改 isHidden 时，它也应该更改 hidden 并因此调用被监视的函数来执行某些操作。但事实证明它没有......当我的组件加载时hidden是未定义的......

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

【问题讨论】：

标签： javascript vue.js vue-component vue-props

【解决方案1】：

数据部分应该是一个函数：

data () { 
  return {
    isHidden: false 
  }
}

【讨论】：

【解决方案2】：

你忘记了使用组件的道具和标签名称和组件名称应该相同

 new Vue({
      el: '#app',
      components: {
        'xyz': xyz,
      }
    })

组件名称

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

此链接应该对您有所帮助：https://vuejs.org/v2/guide/components-registration.html

【讨论】：

【解决方案3】：

哦，等等……现在我觉得自己很愚蠢……

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

固定的 HTML：

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

其余的可以保持不变..

【讨论】：