親子関係があるコンポーネント間の操作についてお伺いしたい事がございます。
お聞きしたい事
2点質問があります。
1点目は解決しました。
スペルミスで、components
とするところをcomponent
としていました。
質問内に、vue名が直接出ておりますが、その内容は、ソースの構成をご確認ください。
1点目:vueコンポーネントの中から、別のコンポーネントを呼び出せない。 解決しました。
~~ 親子関係があるコンポーネントで、子コンポーネントを呼び出す事ができません。
ソースは後述しますが、mainvisualと言う親コンポーネントから、子コンポーネントである、opning,scene,shearという複数のvueを呼び出したいのですが、
次のようなエラーが表示されます。 ~~
Unknown custom element: <opning> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
~~ export defaultで、対象のコンポーネントを指定していますし、nameオプションも指定しています。 ~~
2点目:コンポーネントの出し分け
vueの開発手法的な話になってしまうのですが、場面ごとにコンポーネントを切り替えるにはどのように実装すれば良いのでしょうか?
例えば、opning.vueと言うコンポーネントは、youtubeの動画を流し、終わったら、scene.vueへ移行するとします。
その場合、opning.vueのdisplayをnoneにし、代わりにscene.vueのdisplayをblockにします。
このような実装方法になると思うのですが、この方法がvueとしてベターな実装方法でしょうか?
(状況の把握ようにvuexも導入する準備はできているのですが、まだ使い方が把握でていません。)
ソース
上記、質問にも出てきた、コンポーネント名も踏まえて説明いたします。
構成
構成は下記です。
component/ mainvisual.vue opning.vue scene.vue share.vue app.js index.html
画面の切り替え的に、3部構成になっていて、それぞれ次のようなコンポーネント構成担っています。
- opning.vue:初回読み込み時に表示させる要素
- scene.vue:スライドショーのように次々画面が変わる
- share.vue:scene.vueで選択した要素に紐づいた要素表示。
mainvisualコンポーネントは、それぞれのコンポーネントの出し分けをする想定です。
index.html
html
1<!DOCTYPE html> 2<html lang="jp" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!--[if IE]> 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 8 <![endif]--> 9 </head> 10 <body> 11 <h1>vueテスト</h1> 12 <div id="app"></div> 13 <script src="bundle.js"></script> 14 </body> 15</html>
app.js
js
1import Vue from 'vue' 2import Vuex from 'vuex' 3 4import Cookies from 'js-cookie' 5import axios from 'axios' 6 7import MainVisual from './components/mainvisual' 8 9const URL_BASE = 'http://localhost:3000/' 10 11var mv = new Vue({ 12 el: '#app', 13 data: { 14 scenes_list: [] 15 }, 16 components: { 17 'mainvisual': MainVisual, 18 }, 19 methods: { 20 get_ajax(url, name) { 21 return axios.get(URL_BASE + url) 22 .then((res) => { 23 Vue.set(this, name, res.data); 24 this.$emit('GET_AJAX_COMPLETE'); 25 }) 26 }, 27 get_data(name) { 28 return this.$data[name]; 29 } 30 }, 31 template: '<mainvisual></mainvisual>' 32}); 33 34// クッキーの情報を取得 35Cookies.set('opning-skip', '1');
commponent/mainvisual.vue
これが大元のvueになります。
もしかしたら、app.jsの二度手間かなと思ったのですが、分けています。
現在はtemplate内に全て出力してしまっていますが、本来は状況に応じてコンポーネントを消したり、表示したりしたいと考えています。
vue
1<template> 2<div> 3 <Opning></Opning> 4 <Scene></Scene> 5 <Share></Share> 6</template> 7 8<script> 9import Opning from './opning' 10import Scene from './scene' 11import Share from './share' 12 13export default { 14 component: { 15 'opning': Opning, 16 'scene': Scene, 17 'share': Share 18 } 19} 20</script>
component/opning.vue
オープニング用のコンポーネントです。
vue
1<template> 2<div id="opning"></div> 3</template> 4 5<script> 6import Cookies from 'js-cookie'; 7 8export default { 9 name: 'opning' 10}
component/scene.vue
シーン用のコンポーネントです。
vue
1<template> 2<div id="scene"></div> 3</template> 4 5<script> 6export default { 7 name: 'scene' 8}
component/share.vue
シェア用のコンポーネントです。
vue
1<template> 2<div id="scene"></div> 3</template> 4 5<script> 6export default { 7 name: 'share' 8}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/15 07:23
2018/11/16 15:05