美文网首页
uniapp 中点击某个按钮关注成功 操作

uniapp 中点击某个按钮关注成功 操作

作者: 前端Tree | 来源:发表于2020-03-15 19:02 被阅读0次

    1、dom 子组件

    <view class="flex align-center justify-center rounded bg-main text-white animated" @click="follow(index)" v-if="!item.isFollow" hover-class="jello"  style="width: 90rpx; height: 50rpx;"> 
        关注
    </view>
    
    //  js
    methods:{
        follow(index){
            this.$emit("follow",index)
            },      
    }
    // 点击关注 拿到关注的索引,传递给父组件 父组件根据索引改变 数据
    

    v-if="!item.isFollow" 特意加了个if 也就是如果没有关注则显示,关注则不显示
    父组件 中

    <template>
        <view class="content">
            <block v-for="(item,index) in list" :key="index">
                <common-list :item="item" :index="index" @follow="follow"></common-list>
                <divider></divider>
            </block>
        </view>
    </template>
    
    follow(e){
        console.log(e)
        this.list[0].isFollow = true
        uni.showToast({
        title:"关注成功" 
    })
    }
    

    父组件通过自定义函数接收

    相关文章

      网友评论

          本文标题:uniapp 中点击某个按钮关注成功 操作

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