无法访问模板Vue中的状态属性

Question

我是Vue的新手。我正在尝试从在线videos.In学习Vue，下面是代码片段，在计数器对象中，如果我改变模板来呈现函数，代码开始工作。

我不明白为什么？

-HTML

<div id="app">
  <counter></counter>
  <counter></counter>
  <counter></counter>
  <button @click="inc">increment</button>
</div>

-脚本标签

const state = new Vue({
 data: {
    count: 0
 },
  methods: {
    inc() {
        this.count++;
    }
  }
});

const Counter = {
    template: `<div>{{state.count}}</div>`
}

new Vue({
  el: '#app',
  components: {
    Counter
  },
  methods: {
    inc() {
        state.inc();
    }
  }
})

如果我把计数器中的模板改成这样，它就能正常工作了

render: h => h('div', state.count)

Answer 1

state是一个Vue实例，因此data属性中的变量可以作为state中的属性进行访问，例如：state.count或state实例中的this.count。

因为state.count是有效的，所以您可以在state实例化下的任何地方访问它。

那么render: h => h('div', state.count)就会生效。

现在，在template中访问的任何属性都必须是Vue实例或组件的内部属性，或者是Count中this的属性。

因为Counter组件中的模板将被转换为相应的呈现函数：

render(h) {
    return h('div', this.state.count)
}

{{state.count}}引用的不是state.count变量，而是Counter组件this.state.count的属性。

因此，为了便于示例(在实际项目中不需要做任何事情)，下面是如何使state.count在Counter模板中有效：

const Counter = {
    template: `<div>{{state.count}}</div>`,
    data: () => ({
        state: {
            count: state.count
        }
    })
}