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>