vuejs component that inherits parent's context

Question

Let's start from this

<div class="form-group" :class="{'has-error':determineError('content')}">
  <label>Content Label</label>
  <div class="mandat">*</div>
  <input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</div>

The first thing I would like to obtain is to put this piece of code somehow inside a component, something like this:

Vue.component('form-group', {
    ...
    template: `<div class="form-group" :class="{'has-error':determineError('content')}">
      <label>Content Label</label>
      <div class="mandat">*</div>
      <input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
    </div>`
});

As you can see I still have the input field right there. What I would like to do is pass any piece of code instead and the current component must inherit parent's context.

Something like

<form-group>
  <template>
    <input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
  </template>
</form-group>

How can this be achieved? Notice that I still use parent's context. If using parent's context is not possible, then how can I achieve this in the simplest way?

tony19 · Accepted Answer · 2022-07-16 02:10:10Z

1

You have to use slots, which are expanded in the component template with the contents passed by the parent.

In the form-group component:

<template>
  <div class="form-group" :class="{'has-error':determineError('content')}">
    <label>Content Label</label>
    <div class="mandat">*</div>
    <slot v-bind:form="form"></slot>
  </div>
</template>

You can also add a fallback content inside the <slot> (a default input maybe). Note we are passing the context for the slot contents (see Scoped Slots).

edited Jul 16, 2022 at 2:10

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 24, 2018 at 15:23

Marco Pantaleoni

2,53916 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs component that inherits parent's context

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related