从插槽模板中访问当前组件数据答案

【问题标题】：Access current component data from within slot template从插槽模板中访问当前组件数据
【发布时间】：2021-06-06 08:19:00
【问题描述】：

我有以下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 在插槽模板中为空？

【问题讨论】：

嘿，不需要在模板中使用this。您可以轻松地将total 调用到您的模板中。

标签： vue.js vuejs-slots

【解决方案1】：

Vue自动绑定属性，请过一遍。 data binding

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

【讨论】：

是的，我在发布问题几秒钟后才发现它。不过，这有点令人困惑，而且是隐含的。在您使用“this”的方法中，但在模板中您不使用它。有点混乱。我仍然不明白人们如何发现 vue 比反应更容易！大声笑。

【解决方案2】：

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

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

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

【讨论】：