Многоразовые вложенные компоненты VueJS

Question

Можно ли объявить компонент внутри другого компонента в Vue.JS? вот что я пытаюсь сделать:

<!-- 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>

Я хотел бы избежать глобальной регистрации дочернего компонента, если это возможно (с Vue.component(...))

Другими словами, я хотел бы указать детский <template> внутри файла родительского компонента (без огромной строки template:'entire-html-of-child-component-here')

Answer 1

Конечно.

Как это:

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']
        }
      }
    }
  }
});