利用props封装带有参数及回调事件的组件

实现效果：

 

封装的组件：

<template>
    <view class="page-container-titleNav">
        <view class="content">
            <view class="left">
                <text>{{title}}</text>
                <text class="circle"></text>
            </view>
            <view class="right" @click="rightHandle" v-if="isShow">
                <text>{{rightTitle}}</text>
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: '标题'
            },
            rightTitle: {
                type: String,
                default: '更多'
            },
            isShow: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {

            }
        },
        methods: {
            rightHandle() {
                this.$emit('rightHandle')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-container-titleNav {
        .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f7f7f7;
            padding: 20rpx;

            .left {
                position: relative;
                font-size: 36rpx;
                font-weight: bold;
                z-index: 100;
                .circle {
                    display: block;
                    width: 35rpx;
                    height: 35rpx;
                    border-radius: 50%;
                    background-color: #aa0000;
                    position: absolute;
                    top: -10rpx;
                    right: -15rpx;
                    opacity: .7;
                }
            }

            .right {
                color: $uni-text-color-grey;
                font-size: 24rpx;
                text {
                    padding-right: 5rpx;
                }
            }
        }
    }
</style>

 

使用的方法：

<template>
    <view>
        <title-nav :title="title" @rightHandle='tapTitle'></title-nav>
    </view>
</template>
<script>
    import titleNav from '@/components/titleNav.vue'
    export default {
        components: {
            titleNav
        },
        data () {
            return {
                title: 'this is title'
            }
        },
        methods: {
            tapTitle () {
                console.log('from click')
            }
        }
    }
</script>

<style></style>