Nuxt.js/Vue.js 可重用模态答案

【问题标题】：Nuxt.js/Vue.js resuable modalNuxt.js/Vue.js 可重用模态
【发布时间】：2018-12-01 08:16:17
【问题描述】：

我的问题是关于以下内容的核心逻辑

1) 我有一个部分组件和一个模态组件

2) 在部分组件中，我有一个带有标题和描述的对象数组

3）在模态组件中，我有一个模态模板（我使用 Bulma 框架作为模态）

现在，在该部分中，我有 7 个带有 v-for 循环的按钮来分配“is-active”类，并在每个按钮上单击一个单独的模式打开。

问题：如何将数据解析为模态？我希望我的模态可以重复使用。所以一开始我的模式是空的。在 button1 点击我有 title1 descr1，在 button2 title2 descr2 等等

我的代码：

部分组件：

<template>
<base-section name="clusters">

  <div class="section-map"> 
    <button
    class="section-btn"
    v-for="(item, index) in sectionItems"
    :key="index"
    :class="[`section-btn-num${index + 1}`, {'is-active': item.state}]"
    @click="toggleModal(item)" 
    >
      <div class="section-btn__text">
        {{ item.title }}
    </div>
    </button>
  </div>

  <div class="modal"
  v-for="(item, index) in sectionItems"
  :key="index"
  :class="{'is-active': item.state}"
  >
  <div class="modal-background"></div>
  <div class="modal-content">
  </div>
  <button 
  @click="item.state = false"
  class="modal-close is-large" 
  aria-label="close">
  </button>
</div>

</base-section>
</template>

<script>
import BaseSection from './Section';
import BaseModal from './Modal';
export default {
  components: {
    BaseSection,
    BaseModal,
  },

  methods: {
    toggleModal: (item) => {
      item.state = !item.state;
    }

  },
  data() {
    return {
      sectionItems: [
        {
          title: 'title1',
        },
        {
          title: 'title2',
          description: 'descr',
        },
        {
          title: 'title3',
          description: 'descr',
        },
        {
          title: 'title4',
          description: 'descr',
        },
        {
          title: 'title5',
          description: 'descr',
        },
        {
          title: 'title6',
          description: 'descr',
        },
        {
          title: 'title7',
          description: 'descr',
        },

      ].map(item => ({ ...item, state: false }))
    };
  }
};
</script>

<styles>
/* are skipped */
</styles>

模态组件：

<template>
  <div class="modal">
      <div class="modal-background"></div>
      <div class="modal-content">

        <div class="modal__header">
          <slot name="modal__header">

          </slot>
        </div>

        <div class="modal__body">
          <slot name="modal__body">

          </slot>
        </div>

      </div>
      <button 
      @click="item.state = false"
      class="modal-close is-large" 
      aria-label="close">
      </button>
  </div>
</template>

<script>
import ClustersSection from './ClustersSection';
export default {
  components: {
    ClustersSection,
  },
  props: {
    }
  },
};
</script>

<style lang="scss">
</style>

【问题讨论】：

标签： javascript vue.js modal-dialog code-reuse nuxt.js

【解决方案1】：

由于您已经在组件中定义了槽，您可以通过slots 将数据传递给它。例如

<your-modal-component>
  <template slot="modal__header">
    header bla bla a
  </template>
  <template slot="modal__body">
    body anything here like <p> hehe</p>
  </template>
</your-modal-component>

【讨论】：