web-dev-qa-db-ja.com

Vue.JSの親コンポーネント内に子コンポーネントを作成する

VueJSで1つのコンポーネントを別のコンポーネントの中に作成する方法を見つけようとしています。たとえば、残念ながら機能しないこのようなもの（子コンポーネントは何もしないように見えます）：

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でホストされていますが、これを使用したい2つのプロジェクトでは、一方に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>
javascriptlaravelvue.jslaravel-sparkvue-component
7
user3089840

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)でグローバルに登録します。その後、どこでも利用できます。

10
Linus Borg