vueでコンポーネントをカプセル化するにはどうすればよいですか? vue のタブ切り替えコンポーネントをカプセル化する方法 (コード付き)

不言
リリース: 2018-07-23 14:40:50
オリジナル
5746 人が閲覧しました

Vue はコンポーネントをどのようにカプセル化しますか? Vue のカプセル化されたコンポーネントの具体的な実装は何ですか?ここでは、Vue でタブ切り替えコンポーネントをカプセル化する方法を共有します。具体的なコードの実装を見てみましょう。

要件

  1. 簡易バージョン
    tab に対応するタブは通常のテキストであり、主に表示コンポーネントに使用されます。

  2. 複合バージョン
    タブに対応するタブには、テーブル、ボタン、アイコン、フォーム、およびデータ対話、親コンポーネントとの通信などを含むその他の要素が含まれます。

  3. パフォーマンスの最適化
    タブを切り替えるときにコンポーネントをキャッシュします。

提案

  • 小道具
    親コンポーネントはパラメータを子コンポーネントに渡します。
    tabList (タブのタイトルリスト)、tabIndex (現在のタブ番号)

  • カスタムイベント
    タブ切り替えイベント

  • スロット
    コンテンツ配信

  • 動的コンポーネント
    keep-alive: 切り替えたコンポーネントをメモリに保持すると、その状態を保持したり、再レンダリングを回避したりできます

複雑さ

それが最初の要件である場合、コンポーネントを自分で記述する必要はありません。 UIフレームワークの既存コンポーネントのニーズに十分対応できる機能を備えています。

それが 2 番目の要件である場合、一般に完全に適切な UI コンポーネントは存在せず、この例は私の個人的な解決策です。

  • タブのパブリック部分をカプセル化

  • タブに対応するコンテンツ領域はスロットコンテンツ配信を使用します

  • ajaxリクエストデータとその他の操作は配信コンテンツコンポーネントで実行されます。

  • フック機能が有効になりました
    コンポーネントがアクティブ化されているかどうかを監視します。

具体的な実装

template

  <p class="my-tabs">
    <p class="tabs-bar">
      <p class="tabs-bar-nav">
        <p class="tabs-tab" v-for="tab in tabList"
        :class="[tabIndex == tab.index ? &#39;tabs-active&#39; : &#39;&#39;]"
        @click="changeTab(tab)">
          {{tab.name}}
        </p>
      </p>
    </p>
    <p class="tabs-content">
      <slot></slot>
    </p>
  </p>
ログイン後にコピー

script

  export default {
  name: &#39;MyTabs&#39;,
  props:
  {
    tabList: Array,
    tabIndex: Number
  },
  data () {
    return {
    }
  },
  methods: {
    changeTab: function (tab) {
      this.$emit(&#39;changeTab&#39;, tab)
    }
  }
}
ログイン後にコピー

style

  <style scoped lang="scss">
.my-tabs {
  font-size: 14px;
  color: #444;
}
 .tabs-bar {
   border-bottom: 1px solid #eee;
   position: relative;
   padding: 5px 0;
 }
 .tabs-bar-nav {
   display: table;
   margin-left: 35px;
   position: absolute;
   bottom: -1px;
 }
 .tabs-tab {
   min-width: 110px;
   padding: 5px 0;
   position: relative;
   display: inline-block;
   text-align: center;
   cursor: pointer;
 }
 .tabs-active {
   border-top: 1px solid pink;
   border-left: 1px solid pink;
   border-right: 1px solid pink;
   border-bottom: 1px solid #fff;
 }
 .tabs-content {
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 30px;
 }
</style>
ログイン後にコピー

Quote

次の 1 つと 2 つは、中の p です。

  <!-- Tabs -->
    <my-tabs :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab">
      <keep-alive>
        <component :is="currentContent">
        </component>
      </keep-alive>
    </my-tabs>
ログイン後にコピー
import MyTabs from &#39;../componets/tabs.vue&#39;
import One from &#39;./one.vue&#39;
import Two from &#39;./two.vue&#39;

export default {
  name: &#39;Home&#39;,
  components: {
    MyTabs,
    &#39;one&#39;: One,
    &#39;two&#39;: Two
  },
  data () {
    return {
      tabIndex: 0,
      currentContent: &#39;one&#39;,
      tabList: [
        {
          index: 0,
          name: &#39;选项一&#39;,
          component: &#39;one&#39;
        },
        {
          index: 1,
          name: &#39;选项二&#39;,
          component: &#39;two&#39;
        }
      ]
    }
  },
  methods: {
     // 切换选项卡
    changeTab: function (tab) {
      this.tabIndex = tab.index
      this.currentContent = tab.component
    }
  }
}
ログイン後にコピー

demo

tabs.png

関連推奨事項:

Jquery は、タブ自動切り替えの特定の実装をカプセル化しますエフェクト_jquery

タブ切り替えコンポーネント (タブ関数) サンプル コード_jquery

以上がvueでコンポーネントをカプセル化するにはどうすればよいですか? vue のタブ切り替えコンポーネントをカプセル化する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート