Question

我正在使用vuex制作一个可以包含动态内容的侧边栏

因此，例如，我有一个带有Sidebar.vue的应用程序，可以加载DynamicContent.vue，如何在

内将道具传递给该DynamicContent.vue

app.js

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

Vue.use(Vuex)

import store from './store'
import Sidebar from './components/Sidebar'
import DynamicContent from './components/DynamicContent.vue'

Vue.component('sidebar', Sidebar)

const app = new Vue({
    el: '#app',
    store,

    data() {
        return {
            dynamicContent: DynamicContent
        }
    },

    methods: {
        toggleSidebar() {
            this.$store.commit('toggleSidebar', dynamicContent)
        }
    }
})

Sidebar.vue

注意：我无法通过组件标签传递道具，因为组件可能具有不同的道具

<template>
    <div>
        <component :is="component" />
    </div>
</template>

<script>
    export default {
        computed: {
            component() {
                return this.$store.state.sidebarComponent
            }
        }
    }
</script>

store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        sidebarOpen: false,
        sidebarComponent: null
    },

    mutations: {
        toggleSidebar(state, component) {
                state.sidebarOpen = ! state.sidebarOpen
        state.sidebarComponent = component
        },
    }
})

Answer 1

要动态绑定道具，可以使用v-bind

<template>
    <div>
        <component :is="component" v-bind="componentProps"/>
    </div>
</template>

<script>
    export default {
        computed: {
            component() {
                return this.$store.state.sidebarComponent
            }
            componentProps {
                return { prop1: 'value', prop2: 123 }
            }
        },
    }
</script>

v-bind接受一个对象，并将其中的所有属性作为道具传递给组件。

Vue-将道具传递到程序化组件

1 个答案: