Problem beim Teilen einer Komponente in vue+webpack (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Lösung für zwei oder mehr Menüs vorgestellt, um eine Komponente in der tatsächlichen Entwicklung von Vue + Webpack zu teilen.

In der tatsächlichen Entwicklung von Vue ist dies häufig der Fall Wenn Sie beispielsweise auf das Problem der gemeinsamen Nutzung einer Komponente stoßen, gibt es in einem Menü zwei Schaltflächen. Durch Klicken auf jede Schaltfläche wird dieselbe Komponente aufgerufen, und ihr Inhalt besteht darin, unterschiedliche Inhalte basierend auf unterschiedlichen Routing-Parametern anzufordern.

Der erste Schritt besteht darin, wie folgt eine neue Demo von vue+webpack+vuecli zu erstellen:

Vue-cli ist ein Gerüsttool für vue :

npm install -g vue-cli

Der zweite Schritt besteht darin, das Projektverzeichnis einzugeben und ein Vuedemo-Ordnerprojekt zu erstellen. Befolgen Sie die folgenden zwei Schritte:

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

Nach der Eingabe dieses Befehls werden einige Eingabeaufforderungen angezeigt Sorgen Sie sich um sie. Drücken Sie einfach weiter die Eingabetaste.

Der dritte Schritt ist wie folgt:

cd vuedemo
npm install

Die Ausführung von npm install wird eine Weile dauern, da der Code vom Server heruntergeladen wird. Und während der Ausführung werden einige Warnmeldungen angezeigt. Mach dir keine Sorgen, warte einfach. Wenn längere Zeit keine Antwort erfolgt, stoppen Sie den Vorgang einfach mit Strg+C und führen Sie ihn dann erneut aus.

Der letzte Schritt ist wie folgt:

npm run dev

Nach dem Ausführen von npm run dev öffnet sich automatisch ein Browserfenster und Sie können den tatsächlichen Effekt sehen. Diese Demo ist erstellt. Fügen Sie nun einige Inhalte zu dieser Demo hinzu und ändern Sie sie wie folgt:

Ändern Sie den Inhalt von HelloWorld.vue wie folgt:

<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 unter dem Routing-Router Die Änderung von .html ist wie folgt:

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}
 ]
 }
 ]
})

Erstellen Sie nun eine conDetail.vue wie folgt:

<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>

Das Ergebnis ist, dass beim Klicken auf die Inhaltsschaltfläche 1 der Inhalt des Objekts angezeigt wird erscheint. Klicken Sie auf die Inhaltsschaltfläche 2, der entsprechende Inhalt erscheint. Was ich hier schreibe, ist natürlich, dass der Inhalt der Elemente ein leeres Array ist, wenn auf Schaltfläche 2 geklickt wird. Auch hier kommt die Überwachung von $route zum Einsatz.

Wenn Sie bei der Wiederverwendung von Komponenten auf Änderungen in Routing-Parametern reagieren möchten, können Sie einfach das $route-Objekt beobachten (Änderungen überwachen):

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

oder den in 2.2 eingeführten beforeRouteUpdate-Guard verwenden:

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die grundlegende Warenkorbfunktion mit Angular

Details zu Routing und Middleware in node.js Einführung

So implementieren Sie die Eintritts-/Verlassensanimation in Vue

Detaillierte Interpretation der im Webpack ausgeführten Eintrittsfunktion

Das obige ist der detaillierte Inhalt vonProblem beim Teilen einer Komponente in vue+webpack (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!