这里的内容1，内容2，内容3分别是不同的表单又该怎么写呢

如果内容是表单，可以将表单放在模态框组件的插槽(slot)中。具体的实现方法与在普通的HTML页面中类似，只需要在插槽中添加表单的HTML代码即可。例如：

<!-- 模态框 -->
<div class="modal fade" :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="modalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 模态框的头部 -->
      <div class="modal-header">
        <h4 class="modal-title" :id="modalLabel">{{ modalTitle }}</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <!-- 模态框的内容 -->
      <div class="modal-body">
        <slot></slot>
      </div>
    </div>
  </div>
</div>

<template>
  <div>
    <!-- 按钮1 -->
    <button @click="showModal('表单1')">表单1</button>
    <!-- 按钮2 -->
    <button @click="showModal('表单2')">表单2</button>
    <!-- 模态框 -->
    <modal :modal-id="'myModal'" :modal-label="'myModalLabel'" :modal-title="'模态框标题'">
      <!-- 表单1 -->
      <div v-if="modalContent === '表单1'">
        <form>
          <!-- 表单1的表单元素 -->
        </form>
      </div>
      <!-- 表单2 -->
      <div v-else-if="modalContent === '表单2'">
        <form>
          <!-- 表单2的表单元素 -->
        </form>
      </div>
      <!-- 默认内容 -->
      <div v-else>
        默认内容
      </div>
    </modal>
  </div>
</template>

<script>
import Modal from './Modal.vue'

export default {
  components: {
    Modal
  },
  data() {
    return {
      modalContent: '默认内容'
    }
  },
  methods: {
    showModal(content) {
      // 设置新的内容
      this.modalContent = content
      // 显示模态框
      $('#myModal').modal('show')
    }
  }
}
</script>

在这个例子中，我们将两个表单分别放在模态框组件的插槽中，并使用v-if和v-else-if指令来根据需要显示不同的表单。在父组件中，当点击不同的按钮时，会调用showModal方法，从而动态地改变模态框的内容。这里的表单元素可以根据实际情况进行修改，例如可以使用Vue的表单组件来实现表单的绑定和验证。