Vue - Component that accepts a nested component-CodePudding

I would like to have a component that can have another component placed into it. I'm struggling to find how this can be achieved.

If I pass a component in it doesn't get displayed. I'm assuming I need to specify it in the component however I can't find how in the documentation.

E.g.

<component-that-allows-nesting>
  <nested-component/>
</component-that-allows-nesting>

What needs to be added to my component to allow it to accept a nested component?

CodePudding user response：

Vuejs support nested component like Base Component and you can use it. if you want send data from parent component to child component you can use props.

for example

//parent-component

<form>
<base-input />
<base-button>
add form
</base-button>
</form>


//child-component
//BaseInput.vue
<input type="text" placeholder="userName" />

//BaseButton.vue
<button @click="submitForm" >

<slot></slot>
</button>

CodePudding user response：

Here is an example for vue3 carousel.

You should import nested component
You should add this component in components
Use it as nested component

<template>
  <carousel :items-to-show="1.5">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from 'vue3-carousel';

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
  },
};
</script>