1、事件总线vue3的写法
import { defineComponent, reactive, ref, watch,getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
let checkList
if(instance){
const bus = instance.appContext.config.globalProperties.$bus;
bus.on('checkList', (data) => {
checkList = data
});
}
2、如果遇到多层父子传值的情况,比如父传子再传子(就是孙子),还是用props;因为props能在子组件渲染之前,把值传给子组件
① 温压羽流组件 =========父
<template>
<div class="mapBac">
<!-- 子组件 地图组件 -->
<gisMap class="map" ref="mapComponent" :checkList="checkList"></gisMap>
</div>
</template>
import gisMap from '/@/components/Map/map.vue'
export default defineComponent({
components: { gisMap },
setup(props, ctx) {
let checkList = ["配电线路", "高压电缆", "电缆杆", "变压器", "FTU开关", "刀闸", "高压计量", "电容", "故障指示器", "变电站"];
return{
checkList
}
}
② map组件 =========子
<template>
<!-- 子组件 图例组件 -->
<legendBox :checkList="checkList"></legendBox>
</template>
import legendBox from "/@/components/Map/legend.vue";
export default defineComponent({
components: { legendBox },
props: {
checkList:{
type: Array<String>,
required: false
}
},
setup(props, ctx) {
//可以直接用 props.checkList 获取父组件传过来的值
let checkList = props.checkList;
return{
checkList
}
}
③ legend组件===============子的子(孙子)
<template>
<el-checkbox-group v-model="checkList" @change="handleChange">
<el-checkbox v-for="item in layerTreeData" :key="item.src" :label="item.name">
<img :src="getIcon(item.src)" alt="电力图例">
<span>{{ item.name }}</span>
</el-checkbox>
</el-checkbox-group>
</template>
export default defineComponent({
props: {
checkList:{
type: Array<String>,
required: false
}
},
setup(props, ctx) {
//可以直接用 props.checkList 获取父组件传过来的值
let checkList = props.checkList;
return{
checkList
}
}
3、如果遇到父传子,子组件需要传过来的值动态渲染页面的情况,用props;
因为props能在子组件渲染之前,把值传给子组件,不至于在子组件渲染的时候该值是undefined