Vue: template可以提供以函数方式返回吗？

[rendongsc]

目前template只能是字符串，如果支持函数方式返回，那么就可以非常方便的根据业务来动态生成UI了，谢谢！

[yyx990803]

你这个思路完全错误了。模板就是用来描述界面和数据之间的关系的，用 Vue 的时候任何『拼接字符串模板』的想法都说明你的思路有问题。

[rendongsc]

思路有时是由需求和场景决定的，【个性化】是互联网应用和企业应用开发显著区别之一。
动态模板的价值在于解决软件如何在【运行阶段】来满足个性化需求。
基于vue的组件来封装业务组件还是绕不开模板的问题，因此才希望template支持以函数方式返回。
为了解决动态模板的需求实现方式有很多，我们只是希望vue原生可以提供支持。
谢谢！

[yyx990803]

Vue 的模板描述的就是『基于数据的动态界面』，你不利用 Vue 模板本身的动态性，却要在模板字符串上做文章，说明你没有理解 Vue 的设计理念，还是在用字符串模板的思路...

[stcer]

一切以数据为中心，模板也是为数据展现而服务的，以数据来控制模板展现，如果需要根据不同场景展示，可以定义一个场景数据

[stcer]

组件动态创建，创建时再加载模板感觉也很不错

[rendongsc]

如果以程序部署作为分界点，模板可以分为开发阶段由开发人员设计的模板以及运行时根据业务来动态生成的模板！
vue确实提供非常好的基于数据的模板动态展现，但是如果基于v-for 和v-if等来实现比较复杂UI布局是不行的，只能从html模板这个思路来解决。

[rendongsc]

以下代码还根本没有涉及到复杂的布局，但是代码看上去都不是太优雅了！
之前v-for之间的是用单独一个【指令】来封装的，由于bind等问题，还是回归到下面写法。

       '<td v-for="column in columns">',
        '<input v-if="column.type==\'number\'" type="number" class="form-control" v-model="row[column.name]"/>',
        '<input v-if="column.type==\'text\'" type="text" class="form-control" v-model="row[column.name]"/>',
        '<span v-if="column.type==\'date\'&&!column.editable"   v-text="row[column.name]|date column.format"/></span>',
        '<div v-if="column.type==\'boolean\'" class="checkbox" ><label><input type="checkbox" v-bind:disabled="!column.editable" v-model="row[column.name]"><i class="input-helper"></i></label></div>',
        '<div v-if="column.type==\'html\'"  v-html-exp="{model:row,field:column}"/></div>',
        '<span v-if="!column.type"  v-text="row[column.name] |format  column.format column.type"></span>',
        '</td>',

[yyx990803]

所以我说你思路不对... 这种就应该做成各种组件，然后 <component :is="column.type">...

[rendongsc]

上个版本就是封装的指令，只是遇到bind等问题，才用了上面的写法。

  <td v-for="column in columns" v-smart-el="{model:row,fields:columns,field:column}">

---

非常感谢尤同学耐心的回复，基于vue的开发策略上会结合我们的实际情况认真权衡的。

[lwjcjmx123]

@rendongsc 你好，我们目前也碰到这种动态创建组件的问题，现在也是用你这样的 v-for + v-if 来判断实现，诚然，我们感觉这种方式并不是很优美，一直在寻找更加优美高效的方法，不知道你们现在有没有新的实现方法，如果有望不吝赐教

[rendongsc]

@lwjcjmx123 抱歉，已经很长时间没有用vue了！

[su6838354]

有没有像react中动态生成组件的方式，生成模块；
比如伪代码

const config = {
 id: (row) => <div>row.id</div>,
 name: (row) => <div><span>row.name</span></div>
}

const data = {id: 1, name: "sy"}
Object.keys(config).map( item => config[item].render(data[item]) )

这样以后可以任意修改config
vue
怎么实现
是不是只有 slot 方式

[lyh2668]

@su6838354 Vue的官方文档中有讲到渲染函数（render） & JSX的用法

[FLNC]

我遇到这样的问题，整个模板是在后端配，也是为满足用户个性化需求，初衷是模板由实施去写，而不是研发，写数据格式对于实施来说还是有点难

[guohuihot]

有没有一个局部渲染的方法，场景是，两个列表vue文件，后一个列表继承前一个，两个文件js基本一样，不一样的就是模板展示，而已模板展示里一块一块有的一样，有的不一样，一样的可以做成小的组件，但是这样文件显的有点碎，而已事实上也只有这两个文件在用，如果有一个局部渲染的方式，就可以把这些小的组件做成局部渲染，写在js里，就可以继承过来，这样第二个文件只要调用就行，模板方面就显的简洁，而且都是共用;

render我知道，但这个只能整体渲染模板，而且显得更为复杂

[cam510]

所以我说你思路不对... 这种就应该做成各种组件，然后 <component :is="column.type">...

尤大你好，我像請問一下這樣的話好想不能達到一個效果就是，我想react 上 使用ant ui 框架上table，我只管直接插入的數據還有重寫render函數就能動態插入數據。
但是這樣的話我應該如何動態加載components呢？