目录
第一部分：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
}
},