Question

让我们从这个

开始

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

如何实现这一目标？请注意，我仍然使用父上下文。如果无法使用父上下文，那么我该如何以最简单的方式实现这一目标呢？

Answer 1

您必须使用slots，它们在组件模板中展开，并包含父级传递的内容。

在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）。

vuejs组件，它继承了父母的上下文

1 个答案: