Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

<link rel="スタイルシート" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" rel="外部nofollow" >

<テンプレート>
  <div class='パンくず'>
    <div class="bread-crumbs-item">
      <RouterLink to="/">ホーム</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>

    <div v-if="親名" class="パンくずリスト項目">
      <ルーターリンク v-if="親パス" :to="親パス">{{親名}}</ルーターリンク>
      <span v-else>{{親名}}</span>
    </div>

    <i v-if="親名" class="iconfont icon-angle-right"></i>

    <div class="bread-crumbs-item">
      <span>
          <スロット/>
      </span>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCrumbs'、
  小道具: {
    親名: {
      タイプ: 文字列、
      デフォルト： ''
    },
    親パス: {
      タイプ: 文字列、
      デフォルト： ''
    }
  }
}
</スクリプト>

<スタイル スコープ lang='less'>
.パンくず{
  ディスプレイ: フレックス;
  パディング: 25px 10px;
  ＆-アイテム {
    {
      テキスト装飾: なし;
      色: #666;
      遷移: すべて .4;
      &:ホバー{
        色: #27ba9b;
      }
    }
  }
  私 {
    フォントサイズ: 12px;
    フォントスタイル: 通常;
    左マージン: 5px;
    右マージン: 5px;
    行の高さ: 22px;
  }
}
</スタイル>

'./bread-crumbs' から BreadCrumbs をインポートします。

エクスポートデフォルト{
  インストール（アプリ）{
    app.component(BreadCrumbs.name、BreadCrumbs) の順にクリックします。
  }
}

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
// インポートして登録する import myUI from './components'

createApp(App).use(store).use(router).use(myUI).mount('#app')

<テンプレート>
  <div class="home-banner">
    <bread-crumbs parentPath="/xxx" parentName="電化製品">エアコン</bread-crumbs>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定（） {
  }
}
</スクリプト>

<el-breadcrumb セパレーター="/">
  <el-breadcrumb-item :to="{ path: '/' }">ホーム</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >アクティビティ管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>アクティビティ リスト</el-breadcrumb-item>
  <el-breadcrumb-item>イベントの詳細</el-breadcrumb-item>
</el-breadcrumb>

<テンプレート>
  <div class="bread-crumbs-item">
    <RouterLink v-if="to" :to="to"><スロット /></RouterLink>
    <span v-else><スロット /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCurmbsItem',
  小道具: {
    に：
      タイプ: [文字列、オブジェクト]
    }
  }
}
</スクリプト>

'./bread-crumbs' から BreadCrumbs をインポートします。
'./bread-crumbs-item' から BreadCrumbsItem をインポートします。

エクスポートデフォルト{
  インストール（アプリ）{
    app.component(BreadCrumbs.name、BreadCrumbs) の順にクリックします。
    app.component(BreadCrumbsItem .name, BreadCrumbsItem) の実装
  }
}

<テンプレート>
  <div class='パンくず'>
    <スロット />
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCrumbs'
}
</スクリプト>

<スタイル スコープ lang='less'>
.パンくず {
  ディスプレイ: フレックス;
  パディング: 25px 10px;
  :deep(&-item) {
    {
      テキスト装飾: なし;
      色: #666;
      遷移: すべて 0.4 秒;
      &:ホバー{
        色: #27ba9b;
      }
    }
  }
  :深い(i) {
    フォントスタイル: 通常;
    フォントサイズ: 12px;
    左マージン: 5px;
    右マージン: 5px;
    行の高さ: 22px;
  }
}
</スタイル>

<テンプレート>
  <div class="home-banner">
  	<!-- パンくずリスト -->
    <パンくず>
        <BreadCrumbsItem to="/">ホーム</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">電化製品</BreadCrumbsItem>
        <BreadCrumbsItem >エアコン</BreadCrumbsItem>
    </パンくず>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定（） {
  }
}
</スクリプト>

<テンプレート>
  <div class="bread-crumbs-item">
    <RouterLink v-if="to" :to="to"><スロット /></RouterLink>
    <span v-else><スロット /></span>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCurmbsItem',
  小道具: {
    に：
      タイプ: [文字列、オブジェクト]
    }
  }
}
</スクリプト>

<スクリプト>
'vue' から { h } をインポートします
エクスポートデフォルト{
  名前: 'BreadCrumbs'、
  与える （） {
    // 使用方法 // 1. テンプレート タグ、単一ファイル コンポーネントを削除します // 2. 戻り値はコンポーネント コンテンツです // 3. vue2.0 の h 関数が渡され、vue3.0 の h 関数がインポートされます // 4. h の最初のパラメーターはタグ名、2 番目のパラメーターはタグ属性オブジェクト、3 番目のパラメーターは子ノードです // 要件 // 1. パンくずリストの親コンテナーを作成します // 2. デフォルトのスロット コンテンツを取得します // 3. レンダリング関数によって整理されるパンくずリスト項目コンポーネントの i タグを削除します // 4. スロット内の項目をトラバースし、動的に作成されたノードを取得します。最後の項目には i タグがありません // 5. パンくずリスト タグ内の動的に作成されたノードをレンダリングします const items = this.$slots.default()
    const 動的アイテム = []
    items.forEach((item, i) => {
      動的アイテム.push(アイテム)
      i < (items.length - 1) の場合
        dymanicItems.push(h('i', { クラス: 'iconfont icon-angle-right' }))
      }
    })
    h('div', { class: 'bread-crumbs' }, dymanicItems) を返します
  }
}
</スクリプト>

<スタイル lang='less'>
// スコープ属性を削除して、スタイルがアイテムコンポーネントに浸透できるようにします。bread-crumbs {
  ディスプレイ: フレックス;
  パディング: 25px 10px;
   ＆-アイテム {
    {
      テキスト装飾: なし;
      色: #666;
      遷移: すべて .4;
      &:ホバー{
        色: #27ba9b;
      }
    }
  }
  私 {
    フォントサイズ: 12px;
    左マージン: 5px;
    右マージン: 5px;
    行の高さ: 22px;
    // スタイルが適切ではありません // &:last-child {
    // 表示: なし;
    // }
  }
}
</スタイル>

<テンプレート>
  <div class="home-banner">
    <!-- パンくずリスト -->
    <パンくず>
        <BreadCrumbsItem to="/">ホーム</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">電化製品</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx/xx">エアコン</BreadCrumbsItem>
        <BreadCrumbsItem >リモート コントロール</BreadCrumbsItem>
    </パンくず>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定（） {
  }
}
</スクリプト>

エクスポートデフォルト{
  名前: 'BreadCrumbs'、
  与える （） {
    // vue2 のレンダリング関数のパラメータは h 関数です // vue3 の h 関数がインポートされます // createElement (タグ名、タグ属性、タグサブ要素)
    // コンソール.dir(this.$slots.default())
    // XtxBread コンポーネントのすべてのスロットを取得し、コンポーネントインスタンスで埋めます。const items = this.$slots.default()
    定数結果 = []
    items.forEach((item, index) => {
      結果.push(アイテム)
      // i アイコンを手動で生成し、パンくずリスト項目の末尾に追加します if (index < items.length - 1) {
        results.push(<i className='iconfont icon-angle-right'></i>)
      }
    })

    <div className='bread-crumbs'>{results}</div> を返します。
  }
}