Question

我有一个模态组件，我希望能够在我想要时以编程方式插入。有一种方法可以用Vue做到这一点吗？

例如：

Vue.component('modal', {...})

然后在任何组件中，我希望能够做到这样的事情：

Vue.component('login', {
  methods: {  
    openLoginModal() {
       // Create the component modal and pass the props
     }
  }

});

注意：我不希望模态模板存在于我需要使用模态的每个组件中。它只需要例如将模态组件附加到body标签。

Answer 1

我认为最干净的方式最终会通过vuex。

因此，您可以在应用的根目录中设置模态组件，正如您在正文标记之前所说的那样：

<div id="app">

    ...

    <modal v-if"showModal" inline-template>
        <div v-html="modalContent"></div>
    </modal>

</div>
</body>

现在创建一个vuex商店，它允许您切换模态以及我假设填充它的内容：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

new Vuex.Store({
    state: {
        showModal: false,
        modalContent: '',
    },
    mutations: {
        toggleModal: (state) => {
            state.showModal = !state.showModal
        },
        setModalContent: (state, content) => {
            state.modalContent = content
        },
    },
})

使用您的应用注册商店并为showModal设置计算道具（因为应用根目录的模板包含模态组件）：

import store from './vuex/store'

new Vue({
    el: '#app',
    store,
    computed: {
        showModal () {
            return store.state.showModal
        },
        ...
})

将模态组件设置为至少监视state.modalContent：

的值

模态组件

export default {

    computed: {
        modalContent () {
            return this.$store.state.modalContent
        },
        ...

现在，您可以从应用中的任何组件调用vuex商店突变来更新其内容并切换其可见性：

示例组件

export default {

    mounted () {

        this.$store.commmit('setModalContent', '<h1>hello world</h1>')

        this.$store.commmit('toggleModal')
        ...

Vue js以编程方式创建组件

1 个答案: