is的使用
- 當(dāng)is使用在普通html標(biāo)簽(div,h1,p等)上是,會(huì)當(dāng)做普通屬性存在;
<div :is="'我是is屬性'"></div>
- 在component標(biāo)簽上,使用is屬性,則會(huì)保留vue2.x的功能,渲染為對(duì)應(yīng)的組件
<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標(biāo)簽渲染為組件時(shí),需要使用v-is指令:
<div v-is="'TheTestComponent'"></div>
則會(huì)將div渲染為T(mén)heTestComponent.vue組件的內(nèi)容
注意: v-is的屬性值必須為string類(lèi)型,即v-is="'componentName'"
TheTestComponent.vue
<template>
<div :class="$style['container']">
<slot />
css-module
<div>
測(cè)試組件
</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>
