client-app/components/hc-breadcrumb/index.vue

<template>
    <view class="hc-breadcrumb-bar">
        <view class="breadcrumb-bar">
            <template v-for="(item, index) in datas" :key="index">
                <view class="breadcrumb-item"
                      :class="datas.length-1 === index ? 'active': ''"
                      @click="itemClick(item, index)"
                >
                    <text class="name">{{item.name}}</text>
                    <text class="i-ri-arrow-right-s-line icon"/>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
import {ref, watch} from "vue";

//初始变量
const props = defineProps({
    data: {
        type: Array,
        default: () => ([])
    }
});

//变量
const datas = ref(props.data)
const emit = defineEmits(['change'])

//监听变化
watch(() => [
    props.data
], ([data]) => {
    datas.value = data
})

//被点击
const itemClick = (item, index) => {
    if(index !== datas.value.length - 1) {
        emit('change', item, index)
    }
}
</script>

<style lang="scss">
@import "./style.scss";
</style>