Vue：从 <slot> 中的父级获取数据

Question

我不知道我想要的是否能以我想要的方式实现。我正在为模态使用这个 Vue 插件：https://www.npmjs.com/package/vue-js-modal

我有一个名为ModalButton 的组件负责触发模态：

<modal-button :modal-data="{{  collect(['account' => $account])  }}" modal-name="leave-account">Leave Account</modal-button>

如您所见，我将:modal-data 作为道具发送。

ModalButton 组件如下：

<template>
  <button @click.prevent="show" type="button" class="px-3 py-2 bg-gray-200 font-bold text-gray-700 ">
    <slot></slot>
  </button>
</template>

<script>
// @ is an alias to /src

export default {

  name: 'ModalButton',
  data() {
      return {

      }
  },

  props: {
    modalName: String,
    modalData: Object
  },

  methods: {
    show () {
      this.$modal.show(this.modalName, this.modalData);
    },
    hide () {
      this.$modal.hide(this.modalName);
    }
  }
}
</script>

您可以看到来自插件的show 方法正在将该数据发送到模态

this.$modal.show(this.modalName, this.modalData);

在我的刀片模板（我正在使用 laravel）中，我有 <modal>：

<modal name="leave-account" class="text-center">
    <div class="flex items-center justify-center h-full p-6">
        <div>
            <div>
                <div class="text-3xl font-bold mb-2">Are you sure?</div>
                <p>If you leave this account, you won't be able to join back unless invited again. </p>
            </div>
            <footer class="flex items-center justify-end mb-24 mt-auto">
                <button class="px-3 py-2 bg-gray-200 font-bold text-gray-700 mr-3">Cancel</button>
                <ajax-button 
                class-list="px-3 py-2 bg-primary text-white font-bold"
                :route=@{{SOMEHOW ACCESS MODAL DATA}}
                method="delete">
                Yes, leave account
                </ajax-button>
            </footer>
        </div>
    </div>
</modal>

在我的模式中，我有另一个名为 AjaxButton 的组件，它允许我拥有一个可重用的按钮来处理 ajax 请求。

我需要一种方法来访问传递给模态的模态数据。我不想创建一个额外的特定模式组件来处理这个。

这可能吗？

具体来说，:route 道具需要发送的是Account，因为我的路由需要模型绑定。即它看起来像/accounts/leave/53

编辑：

所以我可以这样做：

<button @click="$modal.hide('leave-account')" class="px-3 py-2 bg-gray-200 font-bold text-gray-700 mr-3">Cancel</button>

（就在我的<ajax-button>上方）

很明显，我可以访问$modal 属性/方法。所以必须有一种方法来完成我想要的

Answer 1

您可以使用更简单的模态：

<modal-button v-model="showModal">
Leave Account
</modal-button>
<modal v-model="showModal" caption="Leave Account">
{{  collect(['account' => $account])  }}
</modal>

然后modal-button 将如下所示：

<template>
  <button @click.stop="$emit('input',true)" type="button" class="px-3 py-2 bg-gray-200 font-bold text-gray-700 ">
    <slot/>
  </button>
</template>

<script>
export default
{
  name: 'ModalButton',
  props:
  {
    value:
    {
      type: Boolean,
      default: false
    }
  }
}
</script>

modal 组件将是：

<template>
  <transition name="modal">
    <div class="modal_overlay" @click="close" v-if="value">
      <div class="modal_content" style="overflow: auto;" @click.stop>
        <div class="modal_title">{{ caption }} <div class="modal_close" @click="close">&#10006;</div></div>
        <slot/>
      </div>
    </div>
  </transition>
</template>

<script>

export default
{
  props: 
  {
    value:
    {
      type: Boolean,
      default: false
    },
    caption:
    {
      type: String,
      default: ''
    },

  created()
  {
    document.addEventListener('keydown', this.modal_escape, false);
  },
  beforeDestroy()
  {
    document.removeEventListener('keydown', this.modal_escape, false);
  },
  methods:
    {
      close()
      {
        this.$emit('input', false);
      },
      modal_escape(event)
      {
        var e = event || window.event;
        if(this.value && e.keyCode == 27)
        {
          this.close();
          // All good browsers…
          if (e.preventDefault) e.preventDefault();
          // …and IE
          if (e.returnValue) e.returnValue = false;
          return false;
        }
      }
    }
}
</script>

<style>
  .modal_overlay
  {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 25;
    text-align: initial;
    background-color: rgba(0,0,0,0.75);
  }

  .modal_content
  {
    position: relative;
    display: inline-block;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
    border: 2px solid #000;
    border-radius: 5px;
    max-width: 90vw;
    max-height: 90vh;
  }

  .modal_title
  {
    text-align: center;
    background-color: #F27935;
    color: white;
    line-height: 1.65;
    padding-left: 6px;
  }

  .modal_close
  {
    float: right;
    display: inline-block;
    cursor: pointer;
    padding: 0 5px 0 4px;
  }

  .modal_close:hover
  {
    color: white;
    background-color: #00B4FF;
  }

  .modal-enter-active
  {
    transition: all .4s ease;
  }

  .modal-leave-active
  {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .modal-enter, .modal-leave-to
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>