component组件中的is属性的用法(动态组件渲染)
因为在无序列表中直接放置组件会导致渲染出来的DOM会被放置在无序列表的外层,所以需要通过使用li标签并通过is属性来渲染相应的组件,这样渲染出来的组件就不会渲染到其他位置上了。
<template>
<div id="box">
<ul>
<li v-for="(cpn, index) in $options.components" :is="cpn" :key="index"></li>
</ul>
</div>
</template>
<script>
import UserList from '@/components/NavTab/UserList '
import RightList from '@/components/NavTab/RightList'
import PositionList from '@/components/NavTab/PositionList'
export default {
name: 'NavTab',
components: {
UserList,
RightList,
PositionList
}
}
</script>