美文网首页
Uni-app 封装组件中点击事件回传父组件及传值

Uni-app 封装组件中点击事件回传父组件及传值

作者: 凛冬将至2002 | 来源:发表于2021-06-08 17:00 被阅读0次

    今天封装了一个组件,在组件中有个按钮点击事件要回传给父类,并执行响应操作。

    组件中的回传类似iOS中的block,代理回调。
    this.$emit("func_name", data)
    func_name 要和父级页面中“@”绑定的名字一致。
    this.emit 在组件内触发全局的自定义事件

    <template name="titleBox">
        <view class="p_title">
            <text>{{p_title}}</text>
            <text @click="more()" class="p_more">{{p_more}}</text>
        </view>
    </template>
    
    <script>
    export default{
        name:"titleBox",
        props:{
            p_title:{
                type: String,
                default: ''
            },
            p_more:{
                type: String,
                default: ''
            }
        },
        data(){
            return{
                
            }
        },
        methods:{
            more() {
                console.log('我是子组件')
                this.$emit('moreBtn',this.p_more) //(父组件中触发的事件名,要传的变量名)
            }
        }
    }       
    </script>
    
    <style lang="scss">
    .p_title{
        font-size: $uni-font-size-lg;
        color: $uni-color-error;
        padding-bottom:$uni-spacing-row-base;
        text{
            width: 70%;
            display: inline-block;
            font-weight: bold;
        }
        .p_more{
            font-size: $uni-font-size-sm;
            color: $uni-text-color-placeholder;
            width: 30%;
            text-align: right;
            font-weight: normal;
        }
    }
    </style>
    

    父页面引入:

    <titleBox :p_title="publicTitle" :p_more="publicMore" @moreBtn="publicmoreUrl"></titleBox>
    
    publicTitle:'限时抢购',
    publicMore:'逛一逛',
    
    publicmoreUrl(e){
        uni.navigateTo({
            url:"/pages/details/index",
        });
    }
    

    相关文章

      网友评论

          本文标题:Uni-app 封装组件中点击事件回传父组件及传值

          本文链接:https://www.haomeiwen.com/subject/zuoxeltx.html