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

Posted 2023-02-22

【中文标题】从插槽模板中访问当前组件数据

【英文标题】：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 调用到您的模板中。

【参考方案1】：

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

<div>Total items:  total </div>

【讨论】：

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

【参考方案2】：

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

<div>Total items:  total </div>

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