Vue - 以编程方式将道具传递给组件

Question

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

因此，例如，我有一个带有 Sidebar.vue 的应用程序，它可以加载一个 DynamicContent.vue，我如何将一个 prop 传递给里面的那个 DynamicContent.vue

应用程序.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)
        }
    }
})

侧边栏.vue

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

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

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

商店.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

要动态绑定 props，可以这样使用 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 接受一个对象并将其中的所有属性作为 props 传递给组件。