这是一个创建于 1349 天前的主题，其中的信息可能已经有所发展或是发生改变。
const panes = [
{title: '创意 1', content: ``, key: 1,index: 1},
{title: '创意 2', content: ``, key: 2,index: 2}
];
当我在使用遍历的时候
<a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
{{ pane.content }}
</a-tab-pane>
<a-button v-if="panes.length < 1" @click="add" slot="tabBarExtraContent">
<a-icon type="plus"/>
</a-button>
</a-tabs>
这里的 pane.content， 如何使用组件？ 也就是说 panes content 这个字段如何写， 才能使用一些组件，
我尝试过 使用<template><a-from-model-item label="创意名字"> <a-input placeholder="请输入创意名字" v-model="tgjhForm.names[{{index}}].campaignName"/></a-from-model-item></template> , 但是使用{{ pane.content}} ，的时候直接原样输出了。 并没有将 content 的组件渲染出来，而且在 content 里面使用{{index}} 也是无效的。 各位同学帮忙看看， 我要如何修改才能达到，动态渲染的效果.
 |
1
wheelg 2021-03-21 22:30:26 +08:00 via iPhone
panes 写在 data 里，直接 const 是无效的
|
 |
2
jeesk OP 嗯嗯. 这里的 panes, 我也申明到 data 里面了的. 但就是 content 渲染不出来
|
 |
3
no1xsyzy 2021-03-21 22:47:53 +08:00
|
 |
4
XiaoxiaoPu 2021-03-21 23:25:08 +08:00  1
这个问题其实跟 v-for 无关，也不是动态渲染的问题。本质是，你想要实现把一段运行时字符串，像模板一样被解析。vue 自身并不支持这样，不过确实有这样的库可以实现比如，github.com/alexjoverm/v-runtime-template 。但是更建议你从需求出发，避免这样做。
|
 |
5
gouflv 2021-03-22 08:09:52 +08:00 via iPhone
动态渲染我选 react
|
 |
6
sjhhjx0122 2021-03-22 08:13:42 +08:00
vue 也是支持 jsx 的，用 jsx 吧
|
|
7
jeesk OP @XiaoxiaoPu 差不多就是这意思.
|
 |
8
JaaaaackZheng 2021-03-22 09:17:13 +08:00
|
 |
9
chouchoui 2021-03-22 09:18:30 +08:00
假如有两个已经预先定义好的组件叫 Content1 和 Content2，且已经被引用到当前组件中
import Content1 from "...Content1.vue" import Content2 from "...Content2.vue" { components : { Content1, Content2, } } const panes = [ {title: '创意 1', content: `Content1`, key: 1,index: 1}, {title: '创意 2', content: `Content2`, key: 2,index: 2}, ]; <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable"> <component :is="pane.content" /> </a-tab-pane> 目前只知道这种方式 |
 |
10
SilentDepth 2021-03-22 09:35:23 +08:00
如果组件模板是固定的，建议提前写成组件文件，然后像 @chouchoui #9 那样动态创建组件实例。
如果不想这样，建议手写 render 函数（ JS 或 JSX 都可以），再通过 `<component is>` 创建组件实例。 如果也不想这样，只能加载包含运行时编译器的 Vue，然后把组件模板定义为 template 组装成组件定义，然后通过 `<component is>` 创建组件实例。 如果这样也不行，那只能服务端渲染成 HTML 字符串，然后通过 `v-html` 渲染了。 |
|
11
no1xsyzy 2021-03-22 09:46:29 +08:00
不好意思，半夜没看清……
1. 生成一个临时组件（用随机数拼接名称），把 content 作为 template 传入（它能用到的其他组件也必须全局注册）。然后调用这个临时组件 2. Vue.compile 注意 XSS |
 |
12
serene11c 2021-03-22 09:53:25 +08:00
动态组件 https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6
```html <body> <div id="app"> <div v-for="item in array" :key="item.id"> <component v-if="item.component" :is="item.component"></component> <span v-else>{{ item.content }}</span> </div> </div> <script> Vue.component("tab-home", { template: "<div>Home component</div>" }); Vue.component("tab-posts", { template: "<div>Posts component</div>" }); new Vue({ el: "#app", data() { return { array: [ { id: 1, content: "test" }, { id: 2, component: "tab-home" }, { id: 3, component: "tab-posts" } ] }; } }); </script> </body> ``` |
 |
13
yinxianwei 2021-03-22 13:57:19 +08:00
为什么不自定义组件然后把 pane.content 传值呢
|
|
15
jeesk OP @sjhhjx0122 谢谢， 晚点我去了解一下。
|
|
17
jeesk OP @yinxianwei 嗯嗯。 我晚点去了解一下。
|
 |
19
Summerdx404 2021-03-22 18:39:51 +08:00
|
Select Language