使用局部组件解决switch多个分支内容相同的问题
<pre><code class="language-html"><style lang="less">
@import "~@/styles/z.less";
</style>
<template>
<inside-switch :href="href" :type="type">
<div> {{d.n}} </div>
</inside-switch>
</template>
<script>
export default {
name: 'z-item',
components: {
'inside-switch': {
props: {
type: String,
href: [String, Object]
},
template: `
<router-link :to="href" class="z-item" v-if="type == 'link'">
<slot></slot>
</router-link>
<a :href="href || 'javascript:;'" class="z-item" v-else-if="type == 'a'">
<slot></slot>
</a>
<div class="z-item" v-else>
<slot></slot>
</div>
`,
}
},
props: {
type: {
type: String,
validator (value) {
return ['link', 'a', 'div'].includes(value)
},
default: 'div'
},
href: [String, Object],
item: Object
}
}
</script></code></pre>