Vue: slots and v-html, v-text directives

Alex Kalinin
Jun 13 · 1 min read

v-html, v-text directives will replace all content inside of component near slot:

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- component-with-slot.vue -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<template>
<div>
a
<slot />
</div>
</template>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- parent-component.vue -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<template>
<div>
<ComponentWithSlot v-html='"b"'/>
<!-- output: b -->
<ComponentWithSlot v-text='"b"'/>
<!-- output: b -->
<ComponentWithSlot>b</ComponentWithSlot>
<!-- output: a b -->
</div>
</template>