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

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

Answer 1

数据部分应具有以下功能：

data () { 
  return {
    isHidden: false 
  }
}

Answer 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

Answer 3

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

好吧，其他人都在挣扎： Vue-HTML中没有大字母（camelCase）。

固定的HTML：

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

其余的可以保持不变。.

Vue组件道具未定义

3 个答案: