再利用可能なネストされた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'] 
     } 
     } 
    } 
    } 
});