vue+webpack でのコンポーネントの共有に関する問題 (詳細なチュートリアル)

この記事では、vue+webpackの実際の開発において、複数のメニューでコンポーネントを共有するための解決策を主に紹介しますので、必要な方は参考にしてください

実際のvueの開発では、コンポーネントの共有の問題によく遭遇します。問題は、たとえば、メニューに 2 つのボタンがあり、それぞれのボタンをクリックすると同じコンポーネントが呼び出され、その内容が異なるルーティング パラメータに基づいて異なるコンテンツを要求することです。

最初のステップとして、まず次のように vue+webpack+vuecli の新しいデモを作成します:

vue-cli をグローバルにインストールします。vue-cil は vue のスキャフォールディング ツールです。インストール コマンド:

npm install -g vue-cli

2 番目のステップ、プロジェクトに入ります。ディレクトリ内に vuedemo フォルダー プロジェクトを作成し、次の 2 つの手順に従います。

cd vue_test_project //进入vue_test_project目录下
vue init webpack vuedemo //在vue_test_project目录下创建一个vuedemo工程

このコマンドを入力すると、いくつかのプロンプトが表示されますが、それが何であるかは気にせず、Enter キーを押し続けてください。

3番目のステップは次のとおりです:

cd vuedemo
npm install

コードがサーバーからダウンロードされるため、npm installの実行には時間がかかります。また、実行中にいくつかの警告メッセージが表示されます。心配しないでください。待ってください。長時間応答がない場合は、ctrl+c で停止し、再度実行してください。

最後のステップは次のとおりです:

npm run dev

npm run dev を実行すると、ブラウザ ウィンドウが自動的に開き、実際の効果を確認できます。このデモは作成されています。次に、このデモにコンテンツを追加し、次のように変更します。

HelloWorld.vue のコンテンツを次のように変更します。

<template>
 <p class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <p class="btn">
  <router-link :to="{name:&#39;content&#39;,params:{differId:&#39;con1&#39;}}">内容按钮1</router-link>
  <router-link :to="{name:&#39;content&#39;,params:{differId:&#39;con2&#39;}}">内容按钮2</router-link>
 </p>
 <router-view></router-view>
 </p>
</template>
<script>
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
 msg: &#39;Welcome to Your Vue.js App&#39;
 }
 }
}
</script>
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

ルーティング ルーターの下のindex.html を次のように変更します。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import content from '@/components/conDetail'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'HelloWorld',
 component: HelloWorld,
 children:[
  {name:'content',path:'content/:differId',component:content}
 ]
 }
 ]
})

Now次のように conDetail .vue を作成します:

<template>
 <p class="same">
 这个是相同的内容
 <p class="conlist">
  <template v-for="item in items">
  <p>{{item.con}}</p>
  </template>
 </p>
 </p>
</template>
<script>
export default {
 name: &#39;conDetail&#39;,
 data () {
 return {
 msg: &#39;&#39;,
 differIdType:&#39;&#39;,
 conlist:[
  {&#39;con&#39;:&#39;这是第一个内容按钮的内容1&#39;},
  {&#39;con&#39;:&#39;这是第一个内容按钮的内容2&#39;}
 ],
 items:[], 
 }
 },
 mounted(){
  this.differIdType = this.$route.params.differId == &#39;con1&#39; ? &#39;0&#39; : &#39;1&#39;;
  if(this.differIdType == 0){
  this.items = this.conlist;
  }else{
  this.items = [];
  }
 },
 watch:{
 $route:function(to,from){
  this.differIdType = to.params.differId == &#39;con1&#39; ? &#39;0&#39; : &#39;1&#39;; 
  if(this.differIdType == 0){
  this.items = this.conlist;
  }else{
  this.items = [];
  } 
 }
 }
}
</script>
<style>
</style>

その結果、コンテンツ ボタン 1 をクリックするとオブジェクトのコンテンツが表示され、コンテンツ ボタン 2 をクリックすると対応するコンテンツが表示されます。もちろん、ここで書いているのは、ボタン 2 がクリックされたとき、その項目の内容は空の配列になるということです。 $route の監視もここで使用されます。

コンポーネントを再利用するとき、ルーティングパラメータの変更に対応したい場合は、単に $route オブジェクトを監視 (変更を監視) することができます:

const User = {
 template: '...',
 watch: {
 '$route' (to, from) {
  // 对路由变化作出响应...
 }
 }
}

または 2.2 で導入された beforeRouteUpdate ガードを使用します:

const User = {
 template: '...',
 beforeRouteUpdate (to, from, next) {
 // react to route changes...
 // don't forget to call next()
 }
}

上記は私がコンパイルしたものです皆様、今後も皆様のお役に立てれば幸いです。

関連記事:

Angularを使用して基本的なショッピングカート機能を実装する方法

node.jsのルーティングとミドルウェアの詳細な紹介

Vueで入場/退出アニメーションを実装する方法

説明Webpack で詳細に実行されるエントリー関数

以上がvue+webpack でのコンポーネントの共有に関する問題 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。