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>
        <el-button @click='popoverRef.hide()' >取消</el-button>
        <el-button @click='popoverRef.hide();removeFunction' >确认</el-button>
    <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>
        <el-button @click='popoverRef.hide()' >取消</el-button>
        <el-button @click='popoverRef.hide();$emit("totalRemove")' >确认</el-button>
    <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>
                <el-button @click='popoverRef.hide()'>取消</el-button>
                <el-button @click='popoverRef.hide(); $emit("remove")'>确认</el-button>
            <template #reference>
                <div>删除</div>
            </template>
        </el-popover>
</template>
<script>
import { ref } from 'vue'
export default {
    name:'OperateBox',
    emits:[
        "add",
        "edit",
        "remove",
    setup(props){
        let popoverRef=ref(null)
        return {
            popoverRef,
</script>
 
by 莫得感情踩坑机(限定)
                    2021.9.22坑81（vue、@click、绑定多个事件）：@click 绑定多个事件，中间逗号隔开即可，参数各自传输。代码如下：@click='function1,function2(para)'参考：vue中@click绑定多个事件_YanHSama的博客-CSDN博客_@click绑定多个事件坑82（vue、props、emits、触发函数）：问题场景是父组件使用props传输函数到子组件运行，会死循环（原因不明）。以add函数为例，主要代码是父组件中以属性式绑定函数:.
一个title 处 可能有 一个或多个按钮， 按钮对应不同的响应事件
二. 思路 : 
按钮个数 根据传入的数据length 来循环渲染， 每条数据对应的事件名称 通过动态绑定
三. 封装组件
1. 视图层面
2. 代码部分
2.1 结构部分
<!-- 多个button组件-->
<titleAddBtn addBtnList=addBtnList clkCallBk=listenCall></titleAddBtn>
2.2 JS部分
2.2.1 引入组件
import titleAddBtn from '@/components/titleAddBtn
				
Vue的指令v-forv-onv-oncev-htmlv-textv-prev-cloakv-bind
v-for
v-for用于遍历数据，用在table和ur标签里面是可以自动生成遍历结果和标签效果
<div id="app">
        <li v-for="item in movice">{{item}}</li>
<script>
    const app 
子组件向父子间传值
通过$emit(事件类型，传递值)来向上层触发事件，父组件则对事件进行监听：
v-bind:index="index"可以简写 :index=“index”
v-on:click="hdd"可以简写 @click=“hdd”
<div id="app">
        <!-- 在此补充代码 -->
        <input type="text" v-model="inputVa
				el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件 在各带图标组件中使用 component组件动态加载图标
					31363
				Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide
					17061
				踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
				踩坑记28 el-table default-sort属性 sort() 排序 & toggleRowExpansion 折叠 展开 & el-icon 导入报错 组件名与html元素名重复
                踩坑记16 vue-router4 动态路由 刷新404/白屏/样式错误 next css | 退出登录 removeRoute()后 router.options.routes未更新
                    莫得感情学习机1号: 
                    那你可以解答一下？
                踩坑记7 vue3、el-menu、el-tabs 样式及动态更新
                    莫得感情学习机1号: 
                    <el-menu-item>中的是组件名称，引入时可改名，如改为le-menu-item；.el-menu-item中的是组件内部元素的类名(即元素的class=“el-menu-item”)，为element-plus设置的，也可自定义命名空间(修改前缀el)，详见文档https://element-plus.org/zh-CN/guide/namespace.html
                Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide
                    莫得感情学习机1号: 
                    应该是引入echarts的方式有误，和上述vue、vite及其相关依赖无关。