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 回答