8

我试图弄清楚如何在 VueJS 中将一个组件放在另一个组件中。例如，像这样的东西，不幸的是不起作用（子组件似乎什么都不做）：

http://www.webpackbin.com/NyI0PzaL-

我对使用内联模板和使用如上所示的 .vue 文件扩展名方法同样感兴趣。

这是上面非工作示例的代码：

main.js

import Vue from 'vue'
import App from './App.vue'
import Child from './Child.vue'

new Vue({
  el: 'body',
  components: { App, Child }
})

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <app></app>
    <script src="main.js"></script>
  </body>
</html>

应用程序.vue

<template>
  <div>
      <h1>{{ parent_msg }}</h1>
      <child></child>
  </div>
</template>

<script>
export default {
  data () {
    return {
      parent_msg: 'Hello From the Parent!'
    }
  }
}
</script>

孩子.vue

<template>
  <h1>{{ child_msg }}</h1>
</template>

<script>
export default {
  data () {
    return {
      child_msg: 'Hello From the Child!'
    }
  }
}
</script>

尽管上面的示例托管在 webpackbin.com 上，但在我想使用它的两个项目中，我在一个项目中使用 Laravel，在另一个项目中使用 Laravel Spark。在普通的 Laravel 应用程序中，我主要使用 .vue 文件，而在 Laravel Spark 应用程序中，我主要使用内联模板。我会特别感谢任何工作样本。谢谢！

更新

感谢 Linus 在下面的回答。看来我需要这些更改才能在我的main.js文件中全局注册子组件：

import Vue from 'vue'
import App from './App.vue'
import Child from './Child.vue'
Vue.component('child', Child);

new Vue({
  el: 'body',
  components: { App, Child }
})

或者，为了使子组件保持在本地以在父组件中使用，我可以更改父组件（App.vue），如下所示：

<template>
  <h1>{{ parent_msg }}</h1>
  <div>
      <child></child>
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  components: {Child},
  data () {
    return {
      parent_msg: 'Hello from the parent component!'
    }
  }
}
</script>
4

1 回答 1

12

您在主实例中本地注册了该Child组件，因此它在 App.vue 中不可用

将其从主实例中移除并将其添加到 App.vue：

应用程序.vue

<template>
  <div>
      <h1>{{ parent_msg }}</h1>
      <child></child>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  data () {
    return {
      parent_msg: 'Hello From the Parent!'
    }
  },
  components: {child: Child}
}
</script>

Vue.component('child', Child)..或在您的 main.js 文件中全局注册它。然后它无处不在。

于 2016-07-12T11:23:43.830 回答