[英]How to render variable components in vue like jsx?
In jsx we can store components in variables like const comp=<p>Hello</p>
and then we can put these variables anywhere, choosing witch component to render.在 jsx 中,我们可以将组件存储在变量中,例如const comp=<p>Hello</p>
然后我们可以将这些变量放在任何地方,选择要渲染的女巫组件。
I was wondering if there is a similar thing in vue.我想知道vue中是否有类似的东西。 If I had a template like:如果我有一个像这样的模板:
<template>
<variable-comp />
</template>
I would like to change what variable-comp is dynamically.我想动态更改 variable-comp 的内容。 I'm aware of v-if
and v-for
but that's not the same thing.我知道v-if
和v-for
但这不是一回事。
vue uses this syntax for dynamic components vue 对动态组件使用这种语法
<component v-bind:is=”currentComponent”/>
where 'currentComponent' is the name (string) of component.其中“currentComponent”是组件的名称(字符串)。
ie IE
<template>
<component v-bind:is=”currentComponent”/>
</template>
import CompA from './CompA.vue'
import CompB from './CompB.vue'
export default {
components: {
CompA,
CompB
},
data() {
isA: true
},
computed: {
currentComponent() {
return isA ? 'CompA' : 'CompB'
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.