Vue.js 可重用的嵌套VueJS组件

是否可以在Vue.JS中的另一个组件中声明一个组件？ 这就是我想做的：

导出默认值{
组成部分：{
“cmptest”：{
模板：“#cmptest”，
道具：['mprop']
}
},
数据：（）=>({
瓦尔：“世界”
})
};
{{mprop}}

我希望尽可能避免全局注册子组件（使用

Vue.component（…）

）

换句话说，我想在父组件文件中指定子组件的

（而不做一个大的

行模板：'entill-html-of-child-component-here'

）

当然

像这样：

{{text}}
{{childData}{{myprop}}
新Vue({
el:“#应用程序”，
组成部分：{
“应用程序子项”：{
模板：“#应用程序子项”，
道具：['myprop']，
数据：函数（）{
返回{
childData:“你好”
}
},
组成部分：{
“app-child2”：{
模板：“#app-child2”，
道具：['text']
}
}
}
}
});

有没有办法在同一个.vue文件中执行此操作？我只需要在一个.vue（父）文件中使用这个子组件。@wostex我认为您的示例不符合该部分的要求：换句话说，我想在父组件文件中指定子组件（而不需要使用一个大的行模板：'整条-html-of-child-component-here'）@donMateo谢谢，我已经用正确的代码更新了答案。现在我使用了巨大的单行程序

模板：'..'

，效果很好，但是如果有人知道不创建额外文件的更好方法。。。

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