javascript - 如何在vuejs中以编程方式动态创建组件并返回值

Question

你能帮我解决我的问题吗？我想创建一个为我的项目定制的插件，这样我和我的团队就可以轻松地应用这个警报组件，而无需在每个页面和每个 vuejs 文件上设计对话框？

我的目标是创建一个警报组件插件，我们不必在我们的 vuejs 文件中初始化该组件。例如，只是打电话。

customise_alert.fire({ title: 'Confirmation message'})
.then((result) => {
  if(result.value == 1) console.log("option 1 is pressed")
});

我已经尝试过许多不同的方法，但这是我能达到的最接近目标的方法。

注意:我正在使用 Laravel 和 vuejs

到目前为止，这是我的代码: PopUpComponent.vue

<template>
  <div>
    <v-dialog v-model="dialog_confirmation" max-width="400" content-class="c8-page">
      <v-card>
        <v-card-title class="headline">
          <v-icon v-show="icon_show" :color="icon_color">{{ icon }}</v-icon> {{ title }}
          <a href="#" class="dialog-close" @click.prevent="dialog_confirmation = false"><v-icon>mdi-close</v-icon></a>
        </v-card-title>
        <v-card-text>
          <div style="margin:10px;" v-html="message"></div>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" depressed tile small @click="updateValue(1)">Yes</v-btn>
          <v-btn color="primary" depressed tile small @click="updateValue(2)">No</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
export default {
  name: 'Cirrus-Alert-Confirmation',
  props: {
    title: {default: ''},
    message: {default: ''},
    icon_color: {default: 'while'},
    icon: {default: 'warning'},
    icon_show: {default: false}
  },
  data() {
    return {
      dialog_confirmation: false
    }
  },
  mounted() {

  },
  methods: {
    fire: function() {
      this.dialog_confirmation = true;
    },
    updateValue: function(value) {
      this.$emit('input', value);
      this.dialog_confirmation = false;
    }
  },
  watch: {

  },
}
</script>

global.js

import Vue from 'vue'
import PopUpComponent from "../components/elements/PopUpComponent";
Vue.prototype.$filters = Vue.options.filters;
var cirrus_alert = Vue.extend(CirrusPopUpComponent);
Vue.prototype.$alert = cirrus_alert;

ma​​in.js

import '../../plugins/global';
import Vue from 'vue'
import FormTemplate from '../../components/modules/Templates/FormTemplate.vue';
new Vue({
    el: '#app',
    SuiVue,
    vuetify,
    store,
    components : {
        'main-template-component' : FormTemplate,
    }
}).$mount('#app')

home.blade.php - 简短版本(没有其他声明)

<main-template-component></main-template-component>

FormTemplate.vue(触发警报的函数)

let alert = new this.$alert({
   propsData:  { title: 'Sample' }
});
alert.$mount();
alert.fire({ title: 'Confirmation message'})
.then((result) => {
  if(result.value == 1) console.log("option 1 is pressed")
});

提前致谢。

Answer 1

我认为 vue mixins 可以帮助您解决这个问题。因为它是docs代表:

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

你可以创建一个 mixin 文件夹，在里面，你可以像这个警报一样拥有你的可重用文件，然后将它导入到你想使用它的任何地方，如下所示:

<script>
import alert from '../../mixins/alert'

export default {
  name: 'Component1',
  mixins:[alert],
</script>