序文

任意の言語やフレームワークでは、我々は、コードの再利用を促進します。同じことは、再利用に加えて、開発効率統一管理を向上させることがより重要であり、論理コンポーネントにパッケージ化することができるヴュー、同一の符号についても同様です。私は本当に、プロジェクトを引き継ぐために持っていた少し修正して、各ページを追加する必要がありました、コンポーネントのリストに行きませんでしたパッケージの複数のページのリストを使用します。私はVueのは魂であるコンポーネントベース開発プロジェクトのない使用がないことを確信しています。私たちの基本的なスキルであることをコンポーネントのエレガントで高い再利用性をパッケージ化する方法そう。

タブのカスタムコンポーネント

それはあなたが改善することができ、問題があるかどうかを確認するために実現タブのコンポーネントを初めて目？

効果

パッケージ

<template>
  <div class="tabs">
    <div 
      class="tab-item" 
      :class="{'tab--active':item===activeName}"
      v-for="(item,index) in tabs" 
      :key="index" 
      @click="tabChange(item)">
      {{item}}
    </div>
  </div>
</template>

<script>
export default {
  props:{
    tabs:{
      type: Array,
      default: ()=> []
    },
    activeName:{
      type: String,
      default: ''
    }
  },
  methods:{
    tabChange(item){
      this.$emit('tabChange',item)
    }
  },
}
</script>

使用

<template>
  <div>
    <Tabs :tabs="tabs" :activeName="activeName" @tabChange="tabChange" />
  </div>
</template>

<script>
import Tabs from '../components/Tabs'
export default {
  components:{
    Tabs
  },
  data(){
    return{
      tabs:['黄金体验','败者食尘','绯红之王','白金之星','波纹疾走'],
      activeName: '黄金体验'
    }
  },
  methods:{
    tabChange(item){
      this.activeName = item
    }
  },
}
</script>

分析

最大の問題は、アセンブリで、activeNameは、この場合に使用するのか分からない、別のユーザーを引き継ぐことがあれば、状況はタブが表示されます切り替わっていない、追加のイベントによって、手動で更新するには、ユーザーが必要になります。そして、達成するために内部コンポーネントを参照して、コードを変更するために戻ってきて、そのような部品故障することは明らかです。主成分の実装により、すべての汚い仕事は、理想的な状態は、ユーザーがactiveNameを管理する必要はありませんしなければならないが、内部のコンポーネントを更新します。

どのように改善するために、

小道具を修正しますか？

いくつかは、我々は、それが内部コンポーネントの内部管理に価値の小道具を変更するために持っているとして、それはない、と思うかもしれ？実現可能性にこのアプローチを見て
クリックしたときに、コンポーネントtabChange方法、小道具の更新された値を変更します

tabChange(item){
  this.activeName = item
  this.$emit('tabChange',item)
}

使用時には、コンソールスロー警告

小道具一方向のデータが流れているので、親が更新されます小道具が直接内部サブアセンブリの更新状態の反対側に、データの流れにつながる、サブアセンブリに流れ落ちることは明らかではありません。例えば、どのように親コンポーネントサブアセンブリでは、同じプロパティを依存し、プロパティを更新するために、サブアセンブリの一つは、したがって、サブアセンブリの残りの部分の変化につながる、容易ではない問題が発生した場合に見つけること、そしてそうするためにVueの私たちにはお勧めしません。親コンポーネントが更新されるとまた、小道具のサブアセンブリは、最新の値に更新されます。
ウェイデータフロー：https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE% E6％B5％81

ポジティブな解決策：モデルオプション

改善されたコンポーネント

コンポーネントモデルオプション

Vモデルのカスタムコンポーネントを使用した場合と、カスタムイベント小道具が可能。デフォルトでは、アセンブリ上のVモデルは、小道具やイベントなどの入力値として使用されますが、ボタンやチェックボックスなどの入力のいくつかの種類は、小道具の目的を達成するために別の値を使用することもできます。このような状況で発生した競合を避けるために、使用モデルのオプション。

モデル：https://cn.vuejs.org/v2/api/#model

モデルのオプションは、我々は、プロパティを更新するためのメソッドを呼び出すときにのみ転送値を必要とし、プロパティをバインドし、イベントを追加することができます。

<script>
export default {
  model:{
    prop: 'activeName',
    event: 'update'
  },
  props:{
    tabs:{
      type: Array,
      default: ()=> []
    },
    activeName:{
      type: String,
      default: ''
    }
  },
  methods:{
    tabChange(item){
      this.$emit('update',item) // 这里更新activeName
      this.$emit('tabChange',item)
    }
  }
}
</script>

注あなたはまだ、コンポーネントのオプションで小道具の小道具を宣言する必要があること。

使用

双方向バインディングコンポーネントを使用した後、内部コンポーネントの更新、activeNameの親コンポーネントは、このようなコンポーネントを使用するように更新されますとき属性は、よりエレガントなように見えます

<Tabs :tabs="tabs" v-model="activeName" />

Vueの - カスタムコンポーネントどのようにウェイバインディング

序文