Vue でページの共通ヘッダーをコンポーネント化する方法 (詳細なチュートリアル)

この記事では主にVueのページの共通ヘッダーをコンポーネント化する方法を紹介していますが、編集者がとても良いと思ったので、参考にさせていただきます。エディターをフォローして見てみましょう

この記事では、Vue のページの共通ヘッダーをコンポーネント化する方法を紹介し、それをみんなに共有します。詳細は次のとおりです。

えー... でサクッと生成されたプロジェクトをピックアップします。再びvue-cli。

以前に複数ページの変換を行い、vux の UI コンポーネントを紹介しました。今回は、このプロジェクトに基づいて、vue のコンポーネントについて話しましょう。

なぜ私がいつも vue についてブログを書いているのかは聞かないでください。すべては生活のためです (………………)

これは公式ドキュメントのアドレスです (https://cn.vuejs.org/v2/guide/)コンポーネント.html#コンポーネントとは何ですか?) でコンポーネントについてたくさん書いてきましたが、これが非常に便利であることがお分かりいただけると思います。

公式ドキュメントは非常に詳細に説明されているため、コンポーネントの概念を 1 つずつ紹介するつもりはありません。

本題に入り、プロジェクトを直接ダウンロードしましょう

1 前のプロジェクトを取り出します

2 この要求では、コンポーネントを使用して次のコードをindex.jsに追加するのが自然です。

Vue.component('header-item', {
 props: ['message', 'backUrl'],
 template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont"></i></span></router-link> <p><span>{{message}}</span></p> </header>`
})
// props用来传递数据
//template 一个html结构的模板

前のプロジェクトでは vue ルーティングを使用していたため、backUrl パラメーターは構成可能なルートであり、実際のプロジェクトで独自のニーズに応じて構成できることに注意してください。

3 前回のプロジェクトの github アドレスを引き続き投稿します https://github.com/qianyinghuanmie/vue-cli- 以上は、皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

JavaScriptで画像を大きくする方法

vue+vuex+axios+echartsで中国地図を実装する方法

vueでスタイルの切り替えを実装する方法

入力メソッドによって入力ボックスがブロックされる問題

js でソフトキーボードが入力ボックスをブロックする問題を解決する方法

Angular2 でコンポーネントインタラクションを実装する方法

以上がVue でページの共通ヘッダーをコンポーネント化する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。