【vue】弹窗组件的几种调用方式

在Vue中，弹窗组件的调用方式可以有以下几种：

1. 使用组件实例直接调用：

// 在父组件中
<template>
  <button @click="openModal">打开弹窗</button>
  <ModalComponent ref="modal"></ModalComponent>
</template>
 
<script>
import ModalComponent from './ModalComponent.vue';
 
export default {
  components: {
    ModalComponent
  },
  methods: {
    openModal() {
      this.$refs.modal.open();
    }
  }
}
</script>

2. 使用Vue.prototype全局方法调用：

// 在main.js或其他入口文件中
import Vue from 'vue';
import ModalComponent from './ModalComponent.vue';
 
Vue.prototype.$openModal = function() {
  this.$modal.open();
};
 
// 在需要打开弹窗的组件中
<template>
  <button @click="openModal">打开弹窗</button>
  <ModalComponent ref="modal"></ModalComponent>
</template>
 
<script>
export default {
  methods: {
    openModal() {
      this.$openModal();
    }
  }
}
</script>

3. 使用Vue.use插件形式调用：

// 创建ModalPlugin.js
import ModalComponent from './ModalComponent.vue';
 
const ModalPlugin = {
  install(Vue, options) {
    Vue.prototype.$modal = new Vue({
      render(h) {
        return h(ModalComponent, { props: options.props });
      }
    });
  }
};
 
export default ModalPlugin;
 
// 在main.js中使用插件
import Vue from 'vue';
import ModalPlugin from './ModalPlugin.js';
 
Vue.use(ModalPlugin, { props: { /* 传入props */ } });
 
// 在组件中使用
<template>
  <button @click="openModal">打开弹窗</button>
</template>
 
<script>
export default {
  methods: {
    openModal() {
      this.$modal.open();
    }
  }
}
</script>

4. 使用Vue.observable响应式状态调用：

// store.js
import Vue from 'vue';
 
export const store = Vue.observable({
  isModalOpen: false,
  openModal() {
    this.isModalOpen = true;
  },
  closeModal() {
    this.isModalOpen = false;
  }
});
 
// 在ModalComponent.vue中
<template>
  <div v-if="isModalOpen">
    <!-- 弹窗内容 -->
  </div>
</template>
 
<script>
import { store } from './store.js';
 
export default {
  data() {
    return store;
  }
}
</script>
 
// 在父组件中
<template>
  <button @click="store.openModal">打开弹窗</button>
  <ModalComponent></ModalComponent>
</template>
 
<script>
import { store } from './store.