Question

我试图弄清楚如何在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 }
})

的index.html

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

App.vue

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

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

Child.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>

Answer 1

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

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

<强> App.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>

..或在main.js文件中使用Vue.component('child', Child)全局注册。然后它随处可用。

在Vue.JS中的父组件中创建子组件

1 个答案: