0

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

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

模态的.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 >

然后在我的父母中，我执行以下操作：

<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

我找到了这篇文章（实际上指向我在开始时提到的文档，但我看不出有什么区别会破坏我的代码

4

1 回答 1

0

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

我的 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 >
于 2020-02-20T01:04:28.263 回答