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

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

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

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

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

Answer 2

Vue会自动绑定属性，请看一下。 data binding

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

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

Access current component data from within slot template

vue.js

vuejs-slots