CODEWITHSUNDEEP
vue.jsvuejs2vue-component
ierdna
ierdna

Reputation: 6293

Reusable nested VueJS components

Is it possible to declare a component inside another component in Vue.JS? this is what i'm trying to do:

<!-- this is declared inside some-component.vue file -->
<script> 
    export default {
        components:{
            'cmptest' : {
                template:'#cmptest',
                props:['mprop']
            }
        },
        data : () => ({
            val:'world'
        })
    };
</script>

<template>
    <div>
        <template id="cmptest">
            {{mprop}}
        </template>
        <cmptest mprop="hello"></cmptest>
        <cmptest :mprop="val"></cmptest>
    </div>
</template>

I'd like to avoid globally registering the child component if possible (with Vue.component(...))

In other words, I'd like to specify child's <template> inside the parent component file (without doing a huge line template:'entire-html-of-child-component-here')

Upvotes: 1

Views: 1206

Answers (1)

Egor Stambakio
Egor Stambakio

Reputation: 18156

Sure.

Like this:

https://jsfiddle.net/wostex/63t082p2/7/

<div id="app">
  <app-child myprop="You"></app-child>
  <app-child myprop="Me"></app-child>
  <app-child myprop="World"></app-child>
</div>

<script type="text/x-template" id="app-child2">
  <span style="color: red">{{ text }}</span>
</script>

<script type="text/x-template" id="app-child">
  <div>{{ childData }} {{ myprop }} <app-child2 text="Again"></app-child2></div>
</script>

new Vue({
  el: '#app',
  components: {
    'app-child': {
      template: '#app-child',
      props: ['myprop'],
      data: function() {
        return {
            childData: 'Hello'
        }
      },
      components: {
        'app-child2': {
            template: '#app-child2',
            props: ['text']
        }
      }
    }
  }
});

Upvotes: 3

Related Questions