【精讲】mixins混合及常见bug解决方法

目录

第一部分：mixins混合

第二部分：常见bug解决方法

---

第一部分：mixins混合

mixins.js文件外部公共集合部分：

// 这里必须采用export才可以， 因为该mixins是存放公共的部分 也许不止一个
//所以才组件中引入的同时需要采用{}，否会报错
export  const  tell={
    methods:{
        btn(){
            alert('点我提示信息');
        }
    }
} 
 
export const toll ={
     methods:{
     btttn(){
         alert('点我提示弹窗信息App');
     }
     }
 }

父组件：

<template>
    <div>
      <h2>点我提示信息App</h2>
      <button @click="btttn">点我提示信息App</button>
      <ZhangSan></ZhangSan>
    </div>
</template>

<script>
    import ZhangSan from './components/ZhangSan.vue'
    import {toll} from './mixins.js'
    export default{
        name:'App',
        data(){
            return{
                
            }
        },
        components:{
            ZhangSan,
        },
        mixins:[toll]
    }
</script>

子组件：

<template>
    <div>
        <h2>人员信息</h2>
        <button @click="btn">点我提示信息</button>
    </div>
</template>
<script>
    import {tell} from '../mixins.js'
    export default {
        name:'ZhangSan',
        data(){
            return{
                
            }
        },
        // 外部创建mixins.js内容之后需要在需要的组件中引入  选择出需求的部分
        mixins:[tell]
    }
</script>

第二部分：常见bug解决方法

出现  Vue报错：Mixed spaces and tabs no-mixed-spaces-and-tabs 解决办法

package.json的eslintrcr配置项rules里，手动添加’no-mixed-spaces-and-tabs’，然后定义为0，关闭规则

“no-mixed-spaces-and-tabs”:0

注意：使用的是vue-cil2021的最新版本搭建的vue 2.0项目

补充：使用下面的配置可以减少很多语法检查的报错信息，可以配置使用然后重启项目。

"eslintConfig": {
    "root": false,
    "env": {
      "node": false
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
        "generator-star-spacing": "off",
            "no-tabs":"off",
            "no-unused-vars":"off",
            "no-console":"off",
            "no-irregular-whitespace":"off",
            "no-debugger": "off",
            "no-mixed-spaces-and-tabs":0
    }
  },