时间戳

首页 > 解决方案 > 如何在 vue 的其他地方渲染 div/component？

vue.js - 如何在 vue 的其他地方渲染 div/component？

问题描述

如何在我的组件的其他位置呈现 div/组件，而不将重复的内容作为 vue 中的单独组件？或将重复的内容与目标分开？

例如，这是我要复制的 div：

<div>blabla {{somecontent}}</div>

我想在那些地方渲染（所有代码都应该在一个组件中）：

<section>
 <div> __HERE__ </div>
</section>
<section>
 <div> __HERE__ </div>
</section>

我想我期望的是这样的：

<div #blabla>blabla {{somecontent}}</div>
<section>
 <div> {{blabla}} </div>
</section>
<section>
 <div> {{blabla}} </div>
</section>

标签： vue.js

解决方案

一个好的解决方案是创建一个 Vue 组件。我总是尝试创建组件。作为问题需求，我在这里给出一个解决方案。

您可以创建一个计算或方法来呈现这样的组件

<script>
   ...,
   computed: {
       renderBlaBla() {
          return `<div #blabla>blabla ${this.somecontent}</div>`
       }
   },
   ....
</script>

并在模板部分

<section>
     <div v-html="renderBlaBla"></div>
</section>
<section>
    <div v-html="renderBlaBla"></div>
</section>

推荐阅读