2 相同的文件，如何在 Vue.js 2 中构建模板/组件 [英] 2 identical file, how to build a template / component in Vue.js 2
本文介绍了2 相同的文件，如何在 Vue.js 2 中构建模板/组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Vue.js 2.0，并且我在 2 个不同的文件中有完全相同的代码，唯一改变的是 ID_SPECIFIC_TO_THIS_BLOCK 所以我是初学者关于 Vue，我想知道是否有一种方法可以实现一种模板，我可以将其重用于我的 2 个文件
您可以在下面找到一个文件的完整代码:
<div><div class="容器"><hp-row><hp-列><component v-for="content.column 中的组件" :data="component" :key="component.id" :is="getComponentIdentifier(component.is)"></component></hp-column></hp-row></模板><脚本>从@/views/ModularView"导入 ModularView导出默认{name: 'AboutUsView',混合:[ModularView]，创建(){this.fetch('blocks/ID_SPECIFIC_TO_THIS_BLOCK')},}
解决方案
使用道具:
出口默认{name: 'AboutUsView',混合:[ModularView]，道具:['ID_SPECIFIC_TO_THIS_BLOCK']创建(){this.fetch(`块/${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>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>
解决方案
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>
这篇关于2 相同的文件，如何在 Vue.js 2 中构建模板/组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
