用VUE处理本地组件

Question

我有以下代码：

<my-messages>
    <message>Hello</message>
    <message>World</message>
</my-messages>

目前，我确实将我的<my-messages>组件呈现为：

<div class="Messages">
    <!-- slot here -->
</div>

我喜欢为<message>做同样的事情，但是问题是我收到了错误Unknown custom element: <message>。除非我将代码更改为：

<my-messages inline-template>
    <message>Hello</message>
</my-messages>

似乎有点黑客，一旦我应该将[inline-template]声明为所有<my-messages>组件，而不是将其直接从该组件中直接处理为默认规则(例如，如果存在，则为inlineTemplate: true的选项应执行工作，如果存在(。

预期的渲染应该像：

<div class="Messages">
    <div class="message">Hello</div>
    <div class="message">World</div>
</div>

---

当前我的组件：

export default {
    components: {
        // Should process <message> sub-component.
        message: require('./Messages.Message.vue'),
    }
}

---

编辑：在现实情况下，inline-template似乎从模板中混合了<div> S，而不是嵌套。

Answer 1

inline-template不是黑客。我认为问题是您不是在使用my-messages组件的同一地点注册message组件。

因此，具有my-messages小时候的父组件无法理解message，您也需要在父级中注册它，当您使用inline-template时，范围会更改，并且内部的任何内容都将被视为内部内容。您可以在文档中找到它

编辑

没有办法让<message>仅作为<my-messages>的孩子可用，但是，如果滥用

mounted() {
  if (!this.$parent.$el.classList.contains('my-message')) {
    this.$destroy();
    throw new Error('You must wrap the message in a my-message');
  }
}

请注意，这假设类my-message在根元素中可用，这样您可以使用任何包装器元素。