踩坑记27 vue3 @click 绑定多个事件 | props传输函数死循环 改用emits | ref数组 | template中不能直接使用console.log()

2021.9.22

坑81（vue、@click、绑定多个事件）：@click 绑定多个事件，中间逗号隔开即可，参数各自传输。代码如下：

@click='function1,function2(para)'

参考：vue中@click绑定多个事件_YanHSama的博客-CSDN博客_@click绑定多个事件

坑82（vue、props、emits、触发函数）：问题场景是父组件使用props传输函数到子组件运行，会死循环（原因不明）。

以add函数为例，主要代码是父组件中以属性式绑定函数 :addFunction='handleTotalAdd(data)' ，子组件中声明props: { addFunction: Function, } ，并在相应组件上绑定事件 @click='addFunction' 调用。具体代码如下：

// 有问题的代码，无点击就会一直触发函数，卡死

// 父组件

<TotalOperateBox 

    :addFunction='handleTotalAdd(data)'

    :removeFunction='handleTotalRemove(selectItems)'/>

// 子组件

<el-button @click='addFunction' >添加</el-button>

<el-popover placement='top' trigger='click' ref='popoverRef'>

    <div >确认批量删除？</div>

    <div >

        <el-button @click='popoverRef.hide()' >取消</el-button>

        <el-button @click='popoverRef.hide();removeFunction' >确认</el-button>

    </div>

    <template #reference>

        <el-button >删除</el-button>

    </template>

</el-popover>

...

    props:{

        selectLength:{

            type: Number,

            default: 0,

        },

        addFunction: Function,

        removeFunction: Function,

    },

解决方案：改用emit事件，可以正常触发。

以add函数为例，主要代码是父组件中以事件形式绑定函数 @totalAdd='handleTotalAdd(data)' ，子组件中声明emits: [ "totalAdd", ] ，并在相应组件上绑定事件 @click='$emit("totalAdd")' 触发。具体代码如下：

// 父组件

<TotalOperateBox 

    @totalAdd='handleTotalAdd(data)'

    @totalRemove='handleTotalRemove(selectItems)'/>



// 子组件

<el-button @click='$emit("totalAdd")' >添加</el-button>

<el-popover placement='top' trigger='click' ref='popoverRef'>

    <div >确认批量删除？</div>

    <div >

        <el-button @click='popoverRef.hide()' >取消</el-button>

        <el-button @click='popoverRef.hide();$emit("totalRemove")' >确认</el-button>

    </div>

    <template #reference>

        <el-button >删除</el-button>

    </template>

</el-popover>

...

    emits:[

        "totalAdd",

        "totalRemove",

    ],

参考：文档 emits 选项 | Vue.js (vuejs.org)

Vue 中，如何将函数作为 props 传递给组件_粉丝们务必加入微信粉丝群-CSDN博客

坑83（vue3、ref数组、reactive、响应性）：之前根据 v-for 中的 Ref 数组 | Vue.js (vuejs.org) 直接采用数组存放元素对应ref数组。但在template中直接调用ref数组removePopoverRefs时，取到的是空数组，要进行相关操作必须写在script的函数中。错误代码如下：

<el-button @click='colseRemovePopover($index)'>取消</el-button>

<el-button @click='colseRemovePopover($index);handleRemove(row)' >确认</el-button>

...

let removePopoverRefs=[]

// 省略set、update函数，参考文档即可

const colseRemovePopover=(index)=>{

    // 在template中直接用下句回报错，因为取到的removePopoverRefs为空

    removePopoverRefs[index].hide()

}

优化方法：将removePopoverRefs写到state中，用reactive添加响应性。

// 此时可以直接调用

<el-button @click='removePopoverRefs[$index].hide()' >取消</el-button>

<el-button @click='removePopoverRefs[$index].hide();handleRemove(row)' >确认</el-button>



const state=reactive({

    removePopoverRefs: [],

})

// 省略set、update函数，参考文档即可（与之前略有不同，removePopoverRefs需改为state.removePopoverRefs）

坑84（vue、template、console.log）：template中无法直接用console.log()打印。

为什么需要？因为部分数据在template中调用获取时和script中获取的值有所不同。

<el-button @click='console.log(data)'>打印数据</el-button>  //报错

解决方案：自定义打印函数，设置打印按钮。

<el-button @click='printLog(data)'>打印数据</el-button>

...

const printLog=(data)=>{

    console.log(data)

}

坑85（vue、el-table、el-popover、ref）：之前在el-table中，用ref数组控制每个el-popover的显示。现在进行封装，无需再使用ref数组。而在el-table之中调用该组件即可。

ref数组文档： v-for 中的 Ref 数组 | Vue.js (vuejs.org)

<template>

    <div class='operateBtn'>

        <el-popover trigger='click' ref='popoverRef'>

            <div>确认删除？</div>

            <div>

                <el-button @click='popoverRef.hide()'>取消</el-button>

                <el-button @click='popoverRef.hide(); $emit("remove")'>确认</el-button>

            </div>

            <template #reference>

                <div>删除</div>

            </template>

        </el-popover>

    </div>

</template>



<script>

import { ref } from 'vue'

export default {

    name:'OperateBox',

    emits:[

        "add",

        "edit",

        "remove",

    ],

    setup(props){

        let popoverRef=ref(null)



        return {

            popoverRef,

        }

    }

}

</script>

by 莫得感情踩坑机(限定)