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

问题描述

我有以下 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

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

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

,

Vue 会自动绑定属性，请通过。 data binding

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