CODEWITHSUNDEEP
vue.js
David Rodrigues
David Rodrigues

Reputation: 12532

Processing local components with vue

I have the following code:

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

For now, I did my <my-messages> component be renderized as:

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

And I like to do the same for <message>, but the problem is that I receiving the error Unknown custom element: <message>. Except if I change my code to:

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

It seems a bit hack, once that I should declare the [inline-template] to all <my-messages> components, instead of it be treated directly from this component as a default rule (eg. an option as inlineTemplate: true should do the work, if it exists).

The expected render should be like:

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

My component currently:

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

Edit: on reality, the inline-template seems mixing both <div>s from template, and not nesting it.

Upvotes: 0

Views: 189

Answers (1)

yazfield
yazfield

Reputation: 1283

inline-template is not a hack. I think The problem is you're not registering message components at the same place where you're using my-messages component.

So the parent component that has my-messages as a child can't understand message, you need to register it in the parent too, when you use inline-template the scope changes and and whatever is inside will be treated as inner content. You can find it in the docs

EDIT

There isn't a way to have <message> to be only usable as a child of <my-messages>, you could however throw an exception if it's misused

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

Note that this supposes that the class my-message is available in the root element, this way you can use any wrapper element.

Upvotes: 1

Related Questions