将方法绑定到插槽属性答案

【问题标题】：Binding method to a slot property将方法绑定到插槽属性
【发布时间】：2020-06-04 06:29:10
【问题描述】：

我正在使用 VUE 2.6.11 和类组件。我正在尝试将可以显示为模态的组件包装在将管理模态状态的组件中。

根据文档，我可以使用 Scoped Slots 在父组件中访问我的子道具/方法由于某些原因，我的方法没有绑定到模板：

Modal.vue：

@Component
export default class Modal extends Vue {

  @Prop(String) icon !: string
  @Prop({ default: 'Open popup' }) tooltip !: string

  isVisible = false

  toggleModal() {
    console.log('toggleModal from Modal')
    this.isVisible = !this.isVisible
  }

  toggleModalFactory = 'simple property'
}

模板：

<div >
  <div v-if="isVisible" class="page overlay" >
    <div class="page-content" >
      <div class="dialog-content" >
        <div class="row col" >
          <slot :toggle-modal="toggleModal" />
        </div >
      </div >
    </div >
  </div >
  <button class="btn-primary btn-icon"
          :title="$t(tooltip)"
          @click="toggleModal()" >
    <i :class="icon" />
  </button >
</div >

然后在我的 Parent 我执行以下操作：

<modal icon="plus-icon" v-slot:default="modal" >
  <test-component :toggle-modal="modal.toggleModal" ></test-component >
</modal >

开发工具声称我的方法已绑定

但是当我在嵌套的模态内容中执行 prop 函数时：

export default class TestComponent extends Vue {

  @Prop() toggleModal !: Function

  @Emit()
  dismiss() {
    this.toggleModal()
    console.log('dismiss from TestComponent')
  }

  @Emit()
  accept() {
    this.toggleModal()
    console.log('accept from TestComponent')
    return 'close-success'
  }
}

我收到以下错误：

[Vue warn]: Property or method "toggleModal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

和：

TypeError: this.toggleModal is not a function

我找到了this post（它实际上指向我在开始时提到的文档，但我没有看到破坏我的代码的区别

【问题讨论】：

标签： typescript vue.js vue-class-components

【解决方案1】：

一个开发者失去生命的故事：

我的 TestComponent 缺少 @Component 注释 ...

<script lang="ts" >
import { Emit, Prop, Vue, Component } from 'vue-property-decorator'

@Component
export default class TestComponent extends Vue {

  @Prop(Function) close !: Function

  @Emit()
  dismiss() {
    this.close()
    console.log('dismiss from TestComponent')
  }

  @Emit()
  accept() {
    console.log('close', this.close, this)
    this.close()
    console.log('accept from TestComponent')
    return 'close-success'
  }
}
</script >

【讨论】：