Problème de partage d'un composant dans vue+webpack (tutoriel détaillé)

Cet article présente principalement la solution permettant à deux ou plusieurs menus de partager un composant dans le développement actuel de vue+webpack. Les amis dans le besoin peuvent s'y référer

Dans le développement actuel de vue, c'est souvent le cas. le cas Lorsque vous rencontrez le problème du partage d'un composant, par exemple, il y a deux boutons dans un menu. Cliquer sur chaque bouton appelle le même composant, et son contenu est de demander un contenu différent en fonction de différents paramètres de routage.

La première étape consiste à créer une nouvelle démo de vue+webpack+vuecli comme suit :

Installer vue-cli globalement vue-cil est un outil d'échafaudage pour vue. :

npm install -g vue-cli

La deuxième étape consiste à entrer dans le répertoire du projet et à créer un projet de dossier vuedemo. Suivez les deux étapes suivantes :

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

Après avoir entré cette commande, certaines invites apparaîtront. , oui Ne vous inquiétez de rien, continuez simplement à appuyer sur Entrée.

La troisième étape est la suivante :

cd vuedemo
npm install

L'exécution de npm install prendra un certain temps car le code sera téléchargé depuis le serveur. Et il y aura des messages d'avertissement pendant l'exécution. Ne vous inquiétez pas, attendez. S'il n'y a pas de réponse pendant une longue période, il suffit de ctrl+c pour l'arrêter puis de l'exécuter à nouveau.

La dernière étape est la suivante :

npm run dev

Après avoir exécuté npm run dev, une fenêtre de navigateur s'ouvrira automatiquement et vous pourrez voir l'effet réel. Cette démo est créée. Ajoutez maintenant du contenu à cette démo et modifiez-le comme suit :

Modifiez le contenu de HelloWorld.vue comme suit :

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

Sous le routeur de routage Le index.html est modifié comme suit :

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

Créez maintenant un conDetail.vue comme suit :

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

Le résultat est que lorsque l'on clique sur le bouton de contenu 1, le contenu de l'objet, cliquez sur le bouton de contenu 2 et le contenu correspondant apparaîtra. Bien sûr, ce que j'écris ici, c'est que lorsque l'on clique sur le bouton 2, le contenu de ses éléments est un tableau vide. La surveillance de $route est également utilisée ici.

Lors de la réutilisation de composants, si vous souhaitez répondre aux modifications des paramètres de routage, vous pouvez simplement regarder (surveiller les modifications) l'objet $route :

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

ou utiliser beforeRouteUpdate introduit dans 2.2 Guard :

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

J'ai compilé ce qui précède pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter la fonction de panier de base à l'aide d'Angular

Détails sur le routage et le middleware dans node.js Introduction

Comment implémenter une animation d'entrée/sortie dans Vue

Interprétation détaillée de la fonction d'entrée exécutée dans webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!