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

Question

我是 Vue 的新手。我正在尝试从在线视频中学习 Vue。在下面的 sn-p 中，在 Counter 对象中，如果我将模板更改为渲染函数，代码就会开始工作。

我不明白为什么？

-----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();
    }
  }
})

如果我将 Counter 中的模板更改为此，它正在工作

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

Answer 1

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

因为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
        }
    })
}