vue说说那些细节知识

该文章主要辅助个人复习，还有细节没有写到的请大家在评论区踊跃留言。留言后会统一编写上去

混入（mixin）的使用

vue中mixin可以创建在任何的文件夹下，你可以在需要使用mixin的组件的同一目录下创建一个文件，然后在组件中引入这个文件并使用mixin选项来应用mixin。

1、创建mixin.js（名称没有限制可以任意名称）

export default {
    data(){
        return{
            qq:1,
            ww:2
        }
    },
    methods:{
        jumpClick(){
            console.log('触发了啊啊啊啊');
        }
    }
 
}

2、在其他页面中引用mixin.js  

<template>
  <div class="home">
    <p @click="jumpClick">qq的值：{{qq}}</p>
    <p>ww的值：{{ww}}</p>
  </div>
</template>
 
<script>
 //引用mixin.js使用mixin.js定义的内容 
 import mixin from './mixin'  
  export default {
     //声明引用的mixin，如果使用多个则在数组中继续追加即可
      mixins:[mixin]
  }
</script>

推荐很细的文章：Vue 混入（mixin）详细介绍（可复用性、全局混入）

ERROR in [eslint]  波浪线报错

给vue.config.js中 添加  lintOnSave: false,  然后npm run serve 即可

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

});

throw Error()的使用

在开发中使用forEach,想停止循环就使用这个方法进行报错，就不会继续循环了。

  e.forEach((item) => {
        if (!item.materialNum) {
          this.$message.error('物料信息中请输入数量(板:块 / 砖:件)！');
          throw Error('物料信息中请输入数量(板:块 / 砖:件)！')
        }else if(!Number.isInteger(item.materialNum)){
          this.$message.error('物料信息 数量(板:块 / 砖:件) 不可以为小数！');
          throw Error('物料信息 数量(板:块 / 砖:件) 不可以为小数！')
        }else if(!item.length){
          this.$message.error('物料信息中请输入长(mm)！');
          throw Error('物料信息中请输入长(mm)！')
        }
        
      });

使用el-select不知道如何获取选中的name

这是一个常见的小问题，我们要多学会使用this.$refs。去获取元素 

   <el-select
             ref="warehouseRef"
              v-model="row.warehouseId"
              placeholder="请选择"
              v-if="warehouseIdFlag && rowIndex === $index"
              @change="warehouseRowChange"
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

 warehouseRowChange() {
      //注意 这里务必得使用 this.$nextTick
      this.$nextTick(() => {
      this.tableData[this.rowIndex].warehouseName=this.$refs.warehouseRef.selectedLabel;
      })
    },

父子传值的细节

父传子

方法一：子通过porps来接收

 推荐很细的文章：Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)

vuex的使用

try...catch...语法