2019.03.03前回の記事で使用したダイアログコンポーネントで簡単に説明します。これはサンプルダイアログです。閉じるにはOKボタンを押してください。要素をコンテンツ配信の受け渡し口として利用しますhttps://jp.vuejs.org/v2/guide/components-slots.html親テンプレート(Dialog.vue)で、共通コンポーネントのCommonDialogのslot箇所に渡したいコンテンツを記載します。サンプルダイアログは、CommonModal.vueのslot(name="header")に渡されます。テンプレートをslotで渡すことも可能です。以下には注意してください。親テンプレート内の全てのものは親のスコープでコンパイルされ、子テンプレート内の全てものは子のスコープでコンパイルされる。https://jp.vuejs.org/v2/guide/components-slots.htmlslotを用いた共通コンポーネントを作成して、開発効率をあげましょう。参考githubにコードを、herokuにデプロイしています。よかったら覗いててみてください。ヘッダー自体にheightをもたせることで、mainをヘッダーに隠れないように表示できる。viewを100%とする。ついて※この記事は2020年2月22日に試したものです。現在はVue3.0リリースされています。mgtrmgtrスポンサーリンクこの記事を書いた人mogataroWEBエンジニアです。サーバーサイドエンジニアからフロントエンドエンジニアになりました。mgtrmgtrスポンサーリンクタイトルとURLをコピーしました。