代码之家 › 专栏 › 技术社区 › Marcello B.

Vue-从函数显示/创建组件

vue-component vue.js

0

Marcello B. · 技术社区 · 5 年前

有一件事我一直在努力想办法做得更好,那就是情态动词。目前,我正在每个需要的Vue上注册模态组件。然而,这感觉相当草率,因为我不得不多次注册组件。即使使用mix-ins,也不是一个优雅的解决方案。最理想的做法是模仿JavaScript的 alert() 方法在Vue实例上执行。例如,能够打电话 this.ShowModal(Header, Body)

然而,据我所知,没有办法做到这一点

以我的模态为例。你可以有这样一个模式模板:

<script type="text/x-template" id="modal-template">
    <transition name="modal">
    <div class="modal-mask">
        <div class="modal-wrapper">
        <div class="modal-container">

            <div class="modal-header">
            <slot name="header">
                default header
            </slot>
            </div>

            <div class="modal-body">
            <slot>
            </slot>
            </div>

            <div class="modal-footer">
            <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                OK
                </button>
            </slot>
            </div>
        </div>
        </div>
    </div>
    </transition>
</script>

然后你必须像这样一遍又一遍地引用组件

<template>
    <button @click="displayModal">Display the Modal Alert</button>
    
    <modal v-if="showModal" @close="showModal = false">    
      <h3 slot="header"> This is a good header </h3>
      <p>
           Look at me I am the body! You have seen me {{displayCount}} times!
      </p>
    </modal>
</template>
<script>
   components: {modal},
   data: {
       showModal: false,
       displayCount: 0
   },
   methods: {
      displayModal(){
        this.displayCount++
        this.showModal = true;
      }
   }
</script>

如果您想在父级中为多条消息重用组件,那么您必须添加多个变量来存储头和正文等内容。您可以将一些逻辑放入mixin中,但仍然需要添加模态组件,可能还有mixin。

这就引出了一个问题。有没有办法在Vue实例中创建一个函数,让我们能够动态创建一个模态组件,并用传递给函数的参数填充插槽?例如 this.ShowModal("This is a good header", "Look at me I am the body!")

0 回复 | 直到 5 年前

1

2

Marcello B. 5 年前

使用 Vue.extend() 创建一个“模态”构造函数并创建一个实例,您可以通过$mount或其他方式将其动态装入DOM

在模态示例中:

情态动词vue:

<template>
    <div>
        {{message}} //your modal content
    </div>
</template>
<script>

    export default {
        name: 'modal',
        data(){
            return {
                message: '',  
            }
        },
        methods:{
            /************/
            close () {
                /****this.$destroy()****/
            }
        }
    }
</script>

情态动词js:

import myModal from 'modal.vue'
import Vue from 'vue'
const modalConstructor = Vue.extend(myModal)

const modal = (options,DOM)=>{
    const modalInstance =  new modalConstructor({data:options})
    modalInstance.vm = modalInstance.$mount() //get vm
    const dom = DOM || document.body   // default DOM is body
    dom.appendChild(modalInstance.vm.$el)  // mount to DOM
    return modalInstance.vm
}

export default modal

现在,您可以通过以下函数创建模态组件:

import showModal from 'modal.js'
showModal({message:"..."})