每次启动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>