vue コンポーネント名の概要-jsチュートリアル-php.cn

vue コンポーネント名の概要

不言

リリース： 2018-07-04 10:32:15

オリジナル

3376 人が閲覧しました

Vue プロジェクトを書くとき、誰もがコンポーネントのさまざまな名前に遭遇するでしょう。次に、この記事を通して Vue コンポーネント名の機能の概要を共有します。興味のある友人は一緒に見てください。コンポーネントに名前を付けるときは、そうします

ここでの名前は必須のオプションではありませんが、実際には非常に多くの用途があります

 export default {
   name:&#39;xxx&#39;
}

ログイン後にコピー

1. keep-alive で使用できます。コンポーネント名がキャッシュフィルタリングを実行します

例:

dom がロードされた後、マウントされたフック関数にデータをロードします

export default {
  name:&#39;Detail&#39;
}，
mounted(){
  this.getInfo();
}，
methods:{
  getInfo(){
     axios.get(&#39;/xx/detail.json&#39;,{
       params:{
        id:this.$route.params.id 
       }
     }).then(this.getInfoSucc)
   }
 }

ログイン後にコピー

App.vue を使用しているため、keep-alive を使用すると、ページに 2 回目に入るときにそのページが再リクエストされなくなります。つまり、マウントされた関数がトリガーされます。

解決策は 2 つあります。1 つは、activated() 関数を追加して、新しいページに入るたびにデータを取得することです。

別の解決策は、以下の図に示すように、キープアライブにフィルターを追加することです:

 <p id="app"> 
  <keep-alive exclude="Detail">
   <router-view/>
  </keep-alive>
 </p>

ログイン後にコピー

2. DOM が再帰コンポーネントとして使用される場合

たとえば、次のようなリストがあります。 Detail.vue コンポーネント。vue サブコンポーネントは、再帰的に反復するときに独自の名前を呼び出す必要があります

list.vue:

 <p>
    <p v-for="(item,index) of list" :key="index">
      <p>
        <span class="item-title-icon"></span>
        {{item.title}}
      </p>
      <p v-if="item.children" >
        <detail-list :list="item.children"></detail-list>
      </p>
    </p>
 </p>
<script>
export default {
  name:&#39;DetailList&#39;,//递归组件是指组件自身调用自身
  props:{
    list:Array
  }
}
</script>

ログイン後にコピー

list data:

const list = [{
     "title": "A",
     "children": [{
      "title": "A-A",
      "children": [{
       "title": "A-A-A"
      }]
     },{
        "title": "A-B"
     }]
    }, {
     "title": "B"
    }, {
     "title": "C"
    }, {
     "title": "D"
    }]

ログイン後にコピー

反復の結果は次のとおりです