结果类似于如下：
<template> <div> <demo-block> <template slot="source"> <kv-demo0></kv-demo0> </template> <template slot="highlight"> <pre v-pre><code>......</code></pre> </template> </demo-block> ....... <demo-block> <template slot="source"> <kv-demo1></kv-demo1> </template> <template slot="highlight"> <pre v-pre><code><span>.......</code></pre> </template> </demo-block> </div> </template> <script> export default { name: "component-doc0", components: { "kv-demo0": { template: `<div><kv-tag>标签一</kv-tag></div>` }, "kv-demo1": { template: `<div> <kv-tag :key="tag.name" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)" :type="tag.color"> {{tag.name}} </kv-tag> </div>`, data() { return { dynamicTags: [{ name: "标签一", color: "primary" }] }; }, methods: { handleClose(tag) { this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); } } } } }; </script> <style lang="scss" > .kv-tag { margin-right: 8px; } </style>组件kv-demo0 和kv-demo1 在components中定义；
在demo内部的scss会被提出来，放到了外层vue组件中，如果需要修改样式，可以参考如下写法：
.demo-tag .kv-demo1{ // } .demo-tag .kv-demo0{ // } tag // md的名字 demo0 // 页面内第几个demo 未解决的问题每一个demo中script标签和export之间的代码被丢弃。如果需要引入其他文件，可以在data中通过require引入；
最后本代码仅为练手使用，未在实际开发中使用，如有不正之处望指正。