vue component html,Passing html into Vue component

问题

At the moment I pass some parameters into a vue component

:images= "['/img/work/slide2.png', '/img/work/slide2.png', '/img/work/slide3.png']"

:html="['

hello

', '

goodbye

']"

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

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?

{{ content }}

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

回答1:

Don't pass HTML using attributes but using Slots:

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

I'm the child title

This will only be displayed if there is no content

to be distributed.

And a parent that uses the component:

I'm the parent title

This is some original content

This is some more original content

The rendered result will be:

I'm the parent title

I'm the child title

This is some original content

This is some more original content

You can also use Named Slots if you want to pass more than one field containing HTML.

回答2:

You can inject raw html into Vue components with the v-html directive.

来源：https://stackoverflow.com/questions/44923775/passing-html-into-vue-component