vue组件传参：头部公共右侧图标或文字

1、给移动端头部的标题和右侧图标传参 

2、先写头部组件：TopNavbar.vue

<van-nav-bar :title="topNavbarTitle"  left-arrow>
  <template #right>
    <div class="nav-right">
      <div class="nav-btn">
        <van-icon :name="rightIcon" /><!-改变右侧字体图标：先建参数rightIcon  -->
        <span v-if="edit" @click="edit">{{txt}}</span>  <!编辑：v-if="edit"有就显示，没有就不显示 -->
      </div>
    </div>
  </template>
</van-nav-bar>

export default {
  props: {
    topNavbarTitle: {
      type: String
    },
      rightIcon: {  //tangyk  图标传参
          type: String
      }，
    edit: {       //编辑事件函数
        type: Function
    },
    txt: {   //编辑文字传参
        type: String
    }
  },

  data() {
    return {};
  }
};

 

3、页面引用组件，并传参给标题和图标

//订单中心
<TopNavbar :topNavbarTitle="NavbarTitle" :rightIcon="rightIcon"></TopNavbar> //图标展示

//购物车
<TopNavbar :topNavbarTitle="NavbarTitle" :edit="editClick" :txt="txt"></TopNavbar>  //编辑事件和文字传参

<script>
    import TopNavbar from "@/components/TopNavbar.vue";  //导入组件TopNavbar
    export default {
        components: {Coupon,TopNavbar},
        data() {
    
            return {
                isShow: false,   //编辑弹框改成false，则不显示
                editClick:this.click, //绑定下面“编辑”的点击事件
                //rightIcon:"chat-o", //图标传参
                txt:"编辑",  //文字传参
                actions: [
                ],
    
    
            };
        },
        methods: {
            click() {  //编辑事件
                this.isShow = !this.isShow;
            }
        },
    };

</script>

4、结果预览如下图