구성 요소를 동적으로 생성하고 vuej에서 프로그래밍 방식으로 값을 반환하는 방법

구성 요소를 동적으로 생성하고 vuej에서 프로그래밍 방식으로 값을 반환하는 방법

나와 내 팀이 모든 페이지와 모든 vuejs 파일에 대화 상자를 설계하지 않고도 이 경고 구성 요소를 쉽게 적용할 수 있도록 프로젝트에 맞게 사용자 지정된 플러그인을 만들고자 하는 내 문제를 도와줄 수 있니?

내 목표는 vuejs 파일에서 구성 요소를 초기화하지 않아도 되는 알림 구성 요소 플러그인을 만드는 것이다. 예를 들어, 전화만 하는 경우.

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

나는 이미 여러 가지 접근법을 시도했지만 이것이 내 목표에 가장 근접해 있다.

참고: 나는 라라벨을 부에즈와 함께 사용하고 있다.

지금까지 내 코드: PopUpComponent.부에를 하다

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

글로벌 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;

main.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.properties.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")
});

미리 고맙다.

나는 이 문제를 해결하는데 vue mixins가 도움이 될 것이라고 생각한다.문서의 설명에 따르면:

믹싱은 Vue 구성요소를 위해 재사용 가능한 기능을 배포하는 유연한 방법이다.혼합물 개체에는 모든 구성 요소 옵션이 포함될 수 있다.구성 요소가 혼합물을 사용할 때, 혼합물의 모든 옵션은 구성 요소 자체의 옵션으로 "혼합"된다.

믹스인 폴더를 만들면 그 안에 이 경고와 같은 재사용 가능한 파일이 있을 수 있고, 아래처럼 사용하고자 하는 곳이면 어디든지 가져올 수 있다.

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

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

참조URL: https://stackoverflow.com/questions/69748847/how-to-dynamically-create-an-component-and-return-a-value-programmatically-in-vu