Как добавить два компонента, чтобы сделать один компонент видимым в vue.js?

Question

Я новичок в Vue.js и не понимаю, как добавить несколько компонентов. И я написал два компонента в Vue.js, которые присутствуют в папке src/components, и я хочу добавить эти компоненты, чтобы создать один компонент, который будет сохранен в папке src/views.

Что я сделаля создал один компонент с именем form.vue и другой компонент background.vue

И я хочу показать form.vue (который содержит форму) поверх backgound.vue (который используется для фона)). Так что мне нужно для того, чтобы написать мне в другой компонент, который будет содержать эти два компонента или что-то еще?

Ниже приведена структура папок:

Answer 1

создать 3 компонента и вызвать 2 из них в 3-й компонент.

Например:

You have
component1.vue
component2.vue
component3.vue

В component3.vue:

<script>
    //import components
    import componentOne from '/path/to/component1'
    import componentTwo from '/path/to/component2'
    //now register them locally to use them in this component
    export default{
        components:{componentOne, componentTwo}

    }
   //now call these components in <template> section using kebab case
   <template>
     <div>
          <component-one />  //camelCAse name of component in <script> tag  is used in kebab case in template section
          <component-two />  // means componentTwo will called as <component-two/>
     </div>     
   </template>

</script>

Answer 2

Для этого вы можете использовать слотов , поэтому в вашем background.vue у вас будет:

<template>
 ...
   <slot><slot> <!-- place where the external component will be rendered -->
 ...
 </template>

, а затем в основном компоненте вы получите:

<background>
  <my-form></my-form>
</background>