vue.js - 从插槽模板中访问当前组件数据

Question

我有以下 vue 组件

<template>
   <CardGroup>
      <template #headerRight>
         <div>Total items: {{ this.total }}</div>
      </template>
   </CardGroup>
</template>

export default {
   data() {
      return {
         total: 0
      };
   }
}

我不明白范围界定问题。this插槽模板中的 是，null我无法访问this.total数据属性。不过，我可以在插槽模板之外使用该属性。为什么this插槽模板内为空？

Answer 1

Vue自动绑定属性，请过一遍。 数据绑定

<div>Total items: {{ total }}</div>

Answer 2

好吧，解决方案有点简单。我只需要省略this

<div>Total items: {{ total }}</div>

事实证明 vue 会自动将属性绑定到 _vm。