2 identical file, how to build a template / component in Vue.js 2

问题

I am using Vue.js 2.0, and I have this exact same code in 2 differents files, the only thing that changes is the ID_SPECIFIC_TO_THIS_BLOCK so I am a beginner about Vue and I was wondering if there was an way to implement a kind of template that I would be able to reuse for my 2 files

You can find bellow the entire code for one file:

<template>
    <div>
        <div class="container">
            <hp-row>
                <hp-column>
                    <component v-for="component in content.column" :data="component" :key="component.id" :is="getComponentIdentifier(component.is)"></component>
                </hp-column>
            </hp-row>
        </div>
    </div>
</template>

<script>
import ModularView from '@/views/ModularView'

export default {
    name: 'AboutUsView',
    mixins: [ModularView],

    created () {
        this.fetch('blocks/ID_SPECIFIC_TO_THIS_BLOCK')
    },
}
</script>

回答1:

Use props:

export default {
    name: 'AboutUsView',
    mixins: [ModularView],
    props: ['ID_SPECIFIC_TO_THIS_BLOCK']
    created () {
        this.fetch(`blocks/${this.ID_SPECIFIC_TO_THIS_BLOCK}`)
    },
}

<about-us-view ID_SPECIFIC_TO_THIS_BLOCK="123"></about-us-view>
<about-us-view ID_SPECIFIC_TO_THIS_BLOCK="789"></about-us-view>

来源：https://stackoverflow.com/questions/53426690/2-identical-file-how-to-build-a-template-component-in-vue-js-2