zoukankan      html  css  js  c++  java
  • vue3中context.emit遇见的坑

    场景描述

    今天遇见一个问题 ,子组件向上抛出去的事件。
    被执行了两次,原因是  context.emit('click', item.id)
    你的事件名是click
    将click更改为其他事件名称,就可以去解决了
    

    vue3中context.emit遇见的坑

    <template>
        <div class="table-cont">
            <div
                v-for="(item, index) in tabData"
                :key="index"
                @click="tabHanderClick(item)"
                class="item-blok"
                :class="{ activehengline: item.id == currentIndex }"
            >
                {{ item.name }}
            </div>
        </div>
    </template>
    <script lang="ts">
    import { defineComponent, ref } from 'vue'
    export default defineComponent({
        props: {
            tabData: {
                type: Array,
                default: () => {
                    return []
                },
            },
        },
        setup(props, context) {
            let currentIndex = ref(1)
            const tabHanderClick = item => {
                currentIndex.value = item.id
    			//这里不要向外抛出click事件,可以向外抛出其他的事件。如clickHander
    			//这样就不会被触发两次了
                context.emit('click', item.id)
            }
            return { tabHanderClick, currentIndex }
        },
    })
    </script>
    

    父组件

    <template>
        <div class="">
            <table-list :tabData="tabData" @click="tabHanderClick"></table-list>
        </div>
    </template>
    <script lang="ts">
    import { defineComponent } from 'vue'
    import tableList from '../component/table-list.vue'
    export default defineComponent({
        components: {
            'table-list': tableList,
        },
        setup() {
            function tabHanderClick(idIndex) {
                console.log('fa==>', idIndex)
            }
            let tabData = [
                {
                    name: '我的盘点',
                    id: 1,
                },
                {
                    name: '盘点确认',
                    id: 2,
                },
            ]
            return { tabHanderClick, tabData }
        },
    })
    </script>
    

    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    Java 泛型 泛型的约束与局限性
    Java 泛型 泛型方法
    Java 泛型 泛型数组
    Java 泛型 协变性、逆变性
    Java 泛型 协变式覆盖和泛型重载
    Java 泛型 泛型代码和虚拟机
    Insertion Sort List
    Remove Duplicates from Sorted List II
    String to Integer (atoi)
    SpringMvc源码入门
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15479885.html
Copyright © 2011-2022 走看看