質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

4349閲覧

Vue.jsのtemplateでBladeみたいな継承はできますか?

segur

総合スコア73

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

1グッド

0クリップ

投稿2018/04/05 03:09

編集2018/04/05 05:59

Bladeにおけるテンプレートの継承について

Laravelでテンプレートエンジンとして利用できるBladeには継承という機能があります。

テンプレートの継承機能については、こちらのページで解説されています。
https://readouble.com/laravel/5.6/ja/blade.html

大雑把に言うと、継承元ファイルにHTMLの骨組みと可変部分を定義し、その可変部分に代入する内容を継承先ファイルに定義するという機能です。

Vue.jsのテンプレート構文について

今回、Vue.jsのテンプレート構文を使って、Webアプリの画面をコーディングすることになりました。

Vue.jsのテンプレート構文を勉強中ですが、Bladeにおける継承のような機能が見当たらず戸惑っています。

できれば、継承機能を再現したいのですが、どのような方法がありますでしょうか?
別のパッケージを導入すれば可能でしょうか?

追記1

ご回答ありがとうございます。componentでも同じようなことができるとのことですが、混乱してしまいました。

例えば、継承を使った以下のような構成があったとします。

  • ファイルA: 継承元。HTMLの骨組みと可変部分を定義
  • ファイルB: 継承先。ファイルAの可変部分に注入する内容を定義

これをcomponentで置き換えるとどうなるのでしょうか?
イメージとしては、ファイルAがcomponentになって、それをファイルBから呼び出すということでしょうか?

追記2

ご回答ありがとうございます。追記1に関しては、紹介していただいた記事を参考に解決いたしました。

ファイルA(component)に<slot></slot>というのを入れておけば、そこが可変部分になるのですね。
これがわかっておりませんでした。

componentの親子間での情報の受け渡しはpropsを使うしかないのかと勘違いしておりました。
propsはデータの受け渡しには便利ですが、レイアウトの受け渡しには不便だなぁと感じていたのですが、slotを使うべきだったのですね。

ありがとうございました。

nulltemp👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

コンポーネント内で別のコンポーネントを使えるので継承とか考えなくても同じようなことはできます。
https://jp.vuejs.org/v2/guide/components.html

Laravel側にも@componentが追加されたけど明らかにVueの影響を受けてる。
https://readouble.com/laravel/5.6/ja/blade.html#components-and-slots
書いてある通り理解しやすいのでわざわざ難しいことをする必要はない。

投稿2018/04/05 03:42

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問