Vue组件道具未定义

Posted 2023-02-23

【中文标题】Vue组件道具未定义

【英文标题】：Vue component prop undefined

【发布时间】：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是未定义的......

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

【参考方案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>

其余的可以保持不变..