Question

我是Vue的新手。我正在尝试从在线视频中学习Vue。在下面的代码片段中，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实例或组件的内部属性，或者是this中的Count的属性。

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

无法访问Template Vue中的状态属性

1 个答案: