CODEWITHSUNDEEP
vue.js
bappobrad
bappobrad

Reputation: 31

Vue JS sub components?

Im new to VueJS and trying to figure out how I would nest components or have sub components. I don't know if im very bad at googling but I couldn't really find a clear answer.

This is my script and html :

Vue.component('card', {
    template: '<div class="card"></div>'
})

Vue.component('card-text', {
    props: ['text-content'],
    template: '{{ text-content }}'
})

new Vue({
    el: '#app',
})
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script defer src="script.js"></script>
</head>

<body>
    <div id="app">
        <card>
            <card-text text-content="Text to show"></card-text>
        </card>
    </div>
</body>

</html>

as you can see I have 2 components, card and card-text. I want to display these like this :

<card>
  <card-text text-content="text to show"></card-text>
</card>

Upvotes: 1

Views: 633

Answers (2)

dako
dako

Reputation: 1163

You would need slots to do that. Just change your card component to:

Vue.component('card', {
    template: '<div class="card"><slot></slot></div>'
})

To be able to render different stuff inside <card></card>

You can read more in the docs

Upvotes: 2

crosen9999
crosen9999

Reputation: 823

If you want to nest card-text inside card, just do as follows:

Vue.component('card', {
    template: '<div class="card"><card-text text-content="Text to show"></card-text></div>'
})

Upvotes: 0

Related Questions