Question

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

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

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

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

现在，在本节中，我有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>

Answer 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>

Nuxt.js / Vue.js可恢复模式

1 个答案: