Vue 有办法把一大段 html 代码定义为一个变量吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1153 天前的主题，其中的信息可能已经有所发展或是发生改变。

<template>
    <package v-if="a">
        <same-node>
            <lots-nodes />
        </same-node>
    </package >
    <same-node v-else>
        <lots-nodes />
    </same-node>
<template>

</lots-nodes /> 这里有很多个 elements，这样就有很大一段重复了，有什么办法解决吗？

20 条回复 • 2021-11-03 16:45:09 +08:00

liyang5945

2021-09-18 14:24:53 +08:00

v-html 绑定一个函数，函数里返回 html 字符串

horseInBlack

2021-09-18 14:33:27 +08:00

没看懂你这什么意思，下意识觉得这不是组件吗？定义好然后引用不就行了。

ayase252

2021-09-18 14:35:39 +08:00

<same-node /> 不能抽成一个组件？

Rheinmetal

2021-09-18 14:44:07 +08:00

element ui 有的组件支持 htmlstring 或者 vnode

chairuosen

2021-09-18 14:46:31 +08:00

正经解法是，用 render 方法，https://cn.vuejs.org/v2/guide/render-function.html

vivalavida000

2021-09-18 14:50:45 +08:00

抽组件啊

jguo

2021-09-18 14:51:56 +08:00

一般来说用这些前端框架之后就不该再在 html 层面考虑问题了

dfkjgklfdjg

2021-09-18 15:04:41 +08:00

重复的部分继续组件化，然后 import 进来

freedomT

2021-09-18 15:13:56 +08:00

wellsc

2021-09-18 18:10:46 +08:00

为什么会有这种问题

2i2Re2PLMaDnghL

2021-09-18 18:31:42 +08:00

《分治》

cyrbuzz

2021-09-18 19:06:04 +08:00

可以用 #9 的方法，

```

<components :is="a ? 'package' : 'div'">
<same-node>
<lots-nodes />
</same-node>
</components>
```

John60676

2021-09-19 09:23:46 +08:00

1. 抽组件
2. 写 render 函数

darknoll

2021-09-19 10:00:06 +08:00

is 或者 render

pluvet

2021-09-20 22:28:50 +08:00

jsx?

shilianmlxg

2021-09-29 10:52:22 +08:00

谢谢大佬学到了。有类似学习如何封装组件的文章或者心得嘛。感觉自己写的代码不知道如何抽出来
@cyrbuzz

cyrbuzz

2021-09-29 14:00:32 +08:00

@shilianmlxg

emmm，多造轮子？

没看过类似文章，我自己是先把轮子造出来，不好用就看看难用在什么地方继续造= =。

shilianmlxg

2021-09-29 14:39:20 +08:00

@cyrbuzz 确实没试着造过轮子，谢谢大佬

cyrbuzz

2021-09-29 15:17:12 +08:00

@shilianmlxg

大佬客气~。

chenjiangui998

2021-11-03 16:45:09 +08:00

抽组件和 render 改动都大
比较好的做法是实现一个通用 Node 组件可以挂载任意 Html, Vnode 或者组件, 类似 react 的高阶组件