在Vue.JS中的父組件中創建子組件

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應用程序中，我主要使用內聯模板。 我特別感謝任何工作樣品。 謝謝！

UPDATE

感謝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>

.. Vue.component('child', Child)在main.js文件中使用Vue.component('child', Child)全局注冊它。 然后隨處可用。

在Vue.JS中的父組件中創建子組件

問題描述

1 個解決方案

解決方案1
10 已采納 2016-07-12 11:23:43

在Vue.JS中的父組件中創建子組件

問題描述

1 個解決方案

解決方案1 10 已采納 2016-07-12 11:23:43

解決方案1
10 已采納 2016-07-12 11:23:43