is的使用
- 当is使用在普通html标签(div,h1,p等)上是,会当做普通属性存在;
<div :is="'我是is属性'"></div>
- 在component标签上,使用is属性,则会保留vue2.x的功能,渲染为对应的组件
<component :is="'TheTestComponent'" />
v-is的使用
https://vue3js.cn/docs/zh/guide/migration/custom-elements-interop.html#_3-x-%E8%AF%AD%E6%B3%95-2
如果需要将普通html标签渲染为组件时,需要使用v-is指令:
<div v-is="'TheTestComponent'"></div>
则会将div渲染为TheTestComponent.vue组件的内容
注意: v-is的属性值必须为string类型,即v-is="'componentName'"
TheTestComponent.vue
<template>
<div :class="$style['container']">
<slot />
css-module
<div>
测试组件
</div>
</div>
</template>
<script>
export default {
name: 'TheTestComponent',
data() {
return {
};
},
methods: {},
};
</script>
<style lang="less" module>
@red: red;
.container {
color: @red;
}
</style>
APP.vue
<template>
<div class="hello">
<div v-is="'TheTestComponent'">
<div>
使用v-is渲染的组件
</div>
</div>
<component :is="'TheTestComponent'" >
<div>
使用component渲染的组件
</div>
</component>
</div>
</template>
<script>
import TheTestComponent from '@/views/TheTestComponent.vue'
export default {
name: 'APP',
components: {
TheTestComponent,
},
}
</script>
