每次启动vue2项目的时候在 vue.config.js中配置：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//关闭语法严格检验
lintOnSave:false
})
1：在 src 下 创建 utils 文件夹 然后创建 BaseDao.js文件
import vue from "vue";
const BaseDao =new vue();
export default BaseDao;2：创建School 与 Student 组件
<template>
<div class="School">
<p>{{ ming }}</p>
<button @click="test1()">点击{{ ming }}给下方传参</button>
<p>接收的姓名：{{ lpl.name }}</p>
<p>接收的年龄：{{ lpl.age }}</p>
</div>
</template>
<script>
// 引入新的vue实例对象
import BaseDao from "../utils/BaseDao";
export default {
name: 'School',
components: {
BaseDao
},
mixins: [],
props: {
},
data() {
return {
ming:'我是学校组件',
dat:{
name:'阿萨德',
age:'26',
},
lpl:{}
}
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
test1(){
console.log(this.ming);
// 左侧为给另一个组件传递的参数 ，右侧为当前实例对象
BaseDao.$emit('data',this.dat)
}
},
// 用于接受参数
beforeCreate(){
BaseDao.$on('lol',(data)=>{
this.lpl=data
})
}
};
</script>
<style scoped>
.School{
background-color: aquamarine;
width: 300px;
height: 300px;
}
</style>Student:
<template>
<div class="Student">
<p>{{ ming }}</p>
<button @click="test02()">点我给上方传参</button>
<p>接收的姓名：{{ asd.name }}</p>
<p>接收的年龄：{{ asd.age }}</p>
</div>
</template>
<script>
import BaseDao from "../utils/BaseDao";
export default {
name: 'Student',
components: {
BaseDao
},
mixins: [],
props: {
},
data() {
return {
ming:'我是学生组件',
asd:{},
lol:{
name:'轻微',
age:'33'
}
}
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
// 用于传递参数
test02(){
BaseDao.$emit('lol',this.lol)
}
},
// 用于接受参数
beforeCreate(){
BaseDao.$on('data',(data)=>{
this.asd=data
})
}
};
</script>
<style scoped>
.Student{
background-color: blueviolet;
height: 300px;
width: 300px;
}
</style>