vue.js - vue 在插入字符串时使用组件

Question

插入字符串时如何使用组件？

例如，我有一个组件可以执行以下操作：

组分-A

<template>
  <div>{{someProp}}</div>
</template>

当我在其他组件中使用该组件时，我传递了 someProp ，它是一个 vue 组件和一些纯文本。

其他组件

<component-A someProp="Some text and <component-B/>"/>

如何防止文本被转义？而不是“<component-B/>”组件被替换了吗？

标签： vue.js

Answer 1

Props 只能用于传递 javascript 值，例如字符串、数字、对象、数组等。在您的示例中，someProp具有字符串 value Some text and <component-B/>，因此它将Some text and <component-B/>在模板中逐字呈现。

如果要传递模板片段（我自己的术语），则需要使用插槽而不是道具：

Vue.component('component-a', {
  template: '<span>Component A: <slot></slot></span>',
});

Vue.component('component-b', {
  template: '<strong>Component B</strong>',
});

new Vue({
  el: '#app',
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <component-a>
    Some text and <component-b></component-b>
  </component-a>
</div>