javascript - Vue : Create a parent component that can render a child component

Question

如何创建可以接收和渲染子组件的父组件？

例如:

<Form> 
   <Input/>
   <Input/>
   <Select/>
   <Button/>
<Form/>

Answer 1

您可以使用 slots .

Parent.vue

<template>
 <form>

  <slot/> <!-- The child component will be rendered here -->

 </form>
</template>

Child.vue

<template>
 <div>

  <input/>
  <input/>

 </div>
</template>

祖 parent .vue

<template>
 <div>

  <Parent> <!-- Parent component -->
   <Child/> <!-- Pass child component to it as slot -->
  </Parent>

 </div>
</template>

<script>
import Parent from './Parent.vue'
import Child from './Child.vue'

components: {
 Parent,
 Child
}
</script>