[JavaScript知识库]踩坑记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 莫得感情踩坑机(限定)