0

可悲的是，我对 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是未定义的......

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

4

3 回答 3

1

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

data () { 
  return {
    isHidden: false 
  }
}
于 2020-04-20T19:44:47.347 回答
0

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

好吧，其他人都在苦苦挣扎：Vue-HTML 中没有大字母（驼峰式）..

固定的HTML：

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

其余的可以保持不变..

于 2020-04-20T19:47:22.297 回答
0

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

 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

于 2020-04-20T19:45:20.113 回答