将html传递到Vue组件 [英] Passing html into Vue component

问题描述

此刻，我将一些参数传递给vue组件

At the moment I pass some parameters into a vue component

 <Slider
      :images= "['/img/work/slide2.png', '/img/work/slide2.png', '/img/work/slide3.png']"
      :html="['<div>hello</div>', '<div>goodbye</div>']"
    </Slider>

滑块是'html'滑块或带有图像的滑块。

The slider is either an 'html' slider or one with images.

这很好用，尽管我传入的html会变得更加复杂，可能需要30行，并且这将更难以阅读和作为参数进行管理。

This works fine although the html I pass in is going to get a lot more complex, maybe 30 lines and this will be harder to read and manage as params.

我可以传入外部引用并将其引入组件吗？

Can I pass in an external reference and pull that into the component?

<div v-for="content in html">
    <div class="work-slide">{{ content }}</div>
</div>

您可以看到组件中的循环是一个非常简单的v-for。

As you can see the loop in the component is a very simple v-for.

推荐答案

不要使用属性传递HTML，而是使用插槽：

Don't pass HTML using attributes but using Slots:

假设我们有一个名为my-component的组件，该模板具有以下模板：

Suppose we have a component called my-component with the following template:

<div>
  <h2>I'm the child title</h2>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

和使用该组件的父母：

<div>
  <h1>I'm the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

渲染结果将是：

<div>
  <h1>I'm the parent title</h1>
  <div>
    <h2>I'm the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>
</div>

您也可以使用命名槽。

这篇关于将html传递到Vue组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！