这是一个创建于 1664 天前的主题，其中的息可能已经有所发展或是发生改变。
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 linkopeneyes 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 GenericClass 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