компонент vuejs, который наследует родительский контекст - PullRequest
Новая
       11

компонент vuejs, который наследует родительский контекст

0 голосов
/ 24 апреля 2018

Давайте начнем с этого 

<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>

Первое, что я хотел бы получить, это как-то поместить этот фрагмент кода в компонент, примерно так: 

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>`
});

Как видите, у меня все еще есть поле ввода. Я хотел бы вместо этого передать любой фрагмент кода, и текущий компонент должен наследовать родительский контекст.

Что-то вроде 

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

Как этого достичь? Обратите внимание, что я все еще использую родительский контекст. Если использование родительского контекста невозможно, то как я могу добиться этого самым простым способом?

1 Ответ

0 голосов
/ 24 апреля 2018

Вы должны использовать слотов , которые расширяются в шаблоне компонента содержимым, переданным родительским элементом.

В компоненте form-group: 

<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>

Вы также можете добавить запасной контент внутри <slot> (возможно, по умолчанию). Обратите внимание, что мы передаем контекст для содержимого слота (см. Scoped Slots ).

...