Метод привязки к свойству слота - PullRequest
Новая
       13

Метод привязки к свойству слота

0 голосов
/ 20 февраля 2020

Я использую 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 >

Тогда в моем Parent Я делаю следующее: 

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

Инструменты разработчика утверждают, что мой метод связан dev-tools

Но когда я выполняю функцию 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

Я нашел этот пост (который фактически указывает на документы, которые я упоминал в начале, но я не вижу разницы, которая нарушает мой код

1 Ответ

0 голосов
/ 20 февраля 2020

История разработчика, потерявшего жизнь:

В моем 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 >
...