可重用的嵌套 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']
        }
      }
    }
  }
});