Adding child to component-CodePudding

I've created a Gradient component which I want to use as a background for other elements:

.
 - components
|   - Gradient.vue
 - App.vue

<!-- Gradient.vue -->

<script>
  export default {
    props: ['start', 'end', 'rotation'],
    computed: {
      gradientEncode() {
        return `linear-gradient(${this.rotation}deg, 
            ${this.start} 0%, 
            ${this.end} 100%)`;
      }
    }
  }
</script>

<template>
  <div :style="{ background: gradientEncode }"></div>
</template>

<style></style>

I then want to add an element as a child of this div component:

<!-- App.vue -->

<script>
  import Gradient from "./components/Gradient.vue";
  export default {
    components: {Gradient}
  }
</script>

<template>
  <Gradient start="#eeaeca" end="#94bbe9" rotation="110">
    <h1>Help me add some elements here!</h1>
  </Gradient>
</template>

<style></style>

What's the right syntax for what I'm trying to do?

CodePudding user response：

You need to use slot in your gradient component.

<div :style="{ background: gradientEncode }"><slot></slot></div>

For more details

https://vuejs.org/guide/components/slots.html#slot-content-and-outlet