vue中渲染一个用变量保存的vue组件

Question

问题描述

在vue的template中渲染一个动态的vue组件

相关代码

<template>
 <div>
   {{x}}
 </div
</template>
<script>
import x from './x.vue';

export default{
  data() {
    return { x }
  }
}
</script>

但是这样并不能渲染出这个x组件...
有什么方式可以像react那样直接渲染出一个用变量保存的组件嘛？

Answer 1

如果你是想引用组件：

<template>
 <div>
   <x />
 </div
</template>
<script>
import x from './x.vue';

export default{
    components: {x}
}
</script>

如果你想... emmm 我不太清楚你说的 直接渲染出一个用变量保存的组件 是什么意思？

Answer 2

上面的老哥说的对，你这个是这个组件内部的变量定义，要是想在组件内引用其他组件的话，要用上面老哥的写法。

Answer 3

要想用react的那种方式的话，用vue的render函数加上jsx不就行了吗

Answer 4

话说你都这样了 为啥不直接用slot?