踩坑记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传输函数到子组
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 莫得感情踩坑机(限定)
更多推荐
所有评论(0)