底部导航组件 ../../components/template/nav/bottom.vue

<template>
    <view ref="bottomnav" class="bottom-nav">
                <view  class="uni-flex-item" v-for="(item,idx) in items" :key="idx" @tap="index=idx,(item.fn)(item)"  :class="index==idx?'uni-badge-primary uni-badge-inverted':''">
                    <view class="uni-flex-item uni-column">
                        <view class="nav-icon uni-flex-item">
                            
                            <view class="nav-msg" >
                                <view class="uni-badge uni-badge-danger" v-if="item.msg">{{item.msg}}</view>
                            </view>
                            <icon class="uni-flex-item iconfont" :class="item.ico"  >
                            </icon>
                        </view>
                        <view class="uni-flex-item nav-title">
                                {{item.name}}
                        </view>
                    </view>
                    

                </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                index:0,
                items:[
                    {
                        fn:this.tijiao,//自定义点击触发函数，并且携带被触发的内容数据
                        msg:0,//未读消息数量
                        name:'首页',//标题
                        ico:'icon-fangzi',// iconfont字体图标
                        url:''//跳转url
                    },{
                        fn:this.tijiao,
                        msg:20,
                        name:'订单',
                        ico:'icon-dingdanjihe',
                        url:'/pages/goods/category'
                    }]
                
            };
        },mounted(){
            // console.log("created")
        }
    }
</script>

<style>

.bottom-nav{
    left: 0;
    right: 0;
    position:fixed;
    bottom: 0;
    background:hsl(180,0%,90%);
    font-size: 1em;
    display: flex;
    flex-direction: row;
    text-align: center;
}
.bottom-nav .nav-icon{
    box-sizing: border-box;
}

.bottom-nav .nav-msg{
    margin-left:2em;
    height: 10upx;
}
.bottom-nav .nav-msg .uni-badge{
    padding:1upx 8upx;
    font-size:1em ;
}

.bottom-nav .nav-title{
    height: 1.8em;
    font-size:0.8em ;
}
.bottom-nav .nav-icon{
    line-height: 1em;
    font-size: 2em;
}
</style>

主页面引入子组件-代码详情

路径：/pages/index.vue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="page-body">
            <header></header>
            <view class="main-content" >
                <footer>
                    //插入组件，ref 把子主键元素注册到夫组件$refs,然后可以在父组件操作子组件元素
                    <bottom-nav class=""   ref="bottomNav" ></bottom-nav>
                </footer>   
        </view>
    </view>
</template>
<script>
//子组件文件引入到页面
    import bottomNav from '../../components/template/nav/bottom.vue';

    export default {
        name: "index",
        data() {
            return {
                searchInput:'',
                index:0,
                items:[
                    {
                        fn:this.tijiao,
                        msg:0,
                        name:'首页',
                        ico:'icon-fangzi',
                        url:'/pages/index/index'
                    },{
                        fn:this.tijiao,
                        msg:0,
                        name:'店铺页',
                        ico:'icon-dianpu',
                        url:'/pages/goods/category'
                    },
                    {
                        fn:this.tijiao,
                        msg:230,
                        name:'购物车',
                        ico:'icon-gouwuche',
                        url:'/pages/goods/cart'
                    },
                    {
                        fn:this.tijiao,
                        msg:0,
                        name:'我的',
                        ico:'icon-wode',
                        url:'/pages/user/index'
                    }
                ],
            }
        },
        methods: {
            tijiao(item){
                console.log(item)
                uni.navigateTo({
                    url: item.url
                });
            }
        },
        mounted: function (){
            
            // el渲染完成触发
            this.$nextTick(function () {
            // this.$refs.bottomNav.index=2; //默认触发的样式的索引
            // 替换底部nav 内容
            this.$refs.bottomNav.items=this.items;
            // console.log(this.items)
            // console.log(this.$refs.bottomNav);//

          })
            
        },components: { 
    //注册子组件
            bottomNav
        },
    }
</script>

<style>
    .page-body{
        flex-direction: column;
        align-content: ;
        height: 100vh;
        display: flex;
    }
header{
}

.main-content{

  text-align: center;
  /* background:#DD524D; */
  flex:1;
  overflow:auto;
  box-sizing:border-box;
}

footer{
    height: 100upx;
    background:red;

    overflow:hidden;
    /* background:#fff; */
    box-shadow:0px 1px 15px #ccc;
}


</style>