vue2封装命令式组件

在 Vue 2 中，封装命令式组件通常涉及到创建一个全局的 Vue 实例，并使用该实例的方法来操作组件。下面是一个简单的示例，展示了如何封装一个命令式组件：

// MyModal.vue
template>
  <div class="modal" v-if="show">
    <div class="modal-content">
      <slot></slot>
      <button @click="close">Close</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    }
  }
};
</script>

// main.js
import Vue from 'vue';
import MyModal from './MyModal.vue';

const ModalInstance = Vue.extend(MyModal);
const modal = new ModalInstance();
modal.$mount();

Vue.prototype.$modal = {
  open() {
    modal.open();
  },
  close() {
    modal.close();
  }
};

在上面的示例中，我们创建了一个名为 MyModal 的组件，它包含一个模态框和一个关闭按钮。然后，在 main.js 中，我们使用 `Vue.extend` 方法创建了一个全局的 Vue 实例，并将 MyModal 组件挂载到该实例上。

接下来，我们将该实例保存在变量 `modal` 中，并通过 `Vue.prototype.$modal` 将其定义为全局的命令式组件。这样，我们可以在任何地方通过 `this.$modal.open()` 和 `this.$modal.close()` 调用该组件的方法，来打开和关闭模态框。

请注意，这只是一个简单的示例，你可以根据自己的需求进行进一步的封装和扩展。希望对你有所帮助！