집 > 기사 > 웹 프론트엔드 > vue+webpack에서 구성요소 공유 문제(자세한 튜토리얼)

vue+webpack에서 구성요소 공유 문제(자세한 튜토리얼)

亚连원래의: 2018-06-23 17:16:491455검색

이 글에서는 vue+webpack의 실제 개발에서 컴포넌트를 공유하기 위한 두 개 이상의 메뉴에 대한 솔루션을 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.

실제 vue 개발에서 우리는 종종 컴포넌트를 공유하는 문제에 직면합니다. 예를 들어, 메뉴에 두 개의 버튼이 있고 각 버튼을 클릭하면 동일한 구성 요소가 호출되며 해당 콘텐츠는 서로 다른 라우팅 매개변수에 따라 서로 다른 콘텐츠를 요청합니다.

첫 번째 단계에서는 먼저 다음과 같이 vue+webpack+vuecli의 새 데모를 만듭니다.

vue-cli를 전역적으로 설치합니다. vue-cil은 vue용 스캐폴딩 도구입니다. 설치 명령:

npm install -g vue-cli

두 번째 단계, 프로젝트 입력 디렉터리에서 vuedemo 폴더 프로젝트를 만들고 다음 두 단계를 따르세요.

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

이 명령을 입력하면 몇 가지 프롬프트가 표시됩니다. 프롬프트가 무엇인지 걱정하지 말고 Enter 키를 계속 누르세요.

세 번째 단계는 다음과 같습니다.

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 &#39;vue&#39;
import Router from &#39;vue-router&#39;
import HelloWorld from &#39;@/components/HelloWorld&#39;
import content from &#39;@/components/conDetail&#39;
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: &#39;/&#39;,
 name: &#39;HelloWorld&#39;,
 component: HelloWorld,
 children:[
  {name:&#39;content&#39;,path:&#39;content/:differId&#39;,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: &#39;...&#39;,
 watch: {
 &#39;$route&#39; (to, from) {
  // 对路由变化作出响应...
 }
 }
}

또는 2.2에 도입된 beforeRouteUpdate 가드를 사용하세요.

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

위 내용은 제가 컴파일한 것입니다. 여러분, 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.

vue+webpack에서 구성요소 공유 문제(자세한 튜토리얼)

관련 기사