allzc

@yetrun 谢谢大佬回答，有心了，一直忘了登，不好意思，你说的方向是对的，我现在解决了，彻底不用生命周期去控制每个组件了

@leoleoasd 你说的应该是对的，我明天 try 一下，大佬牛逼！

@iOCZ 通过 pinia ，A 通过 store 中的方法 F 传值给 store ，B 监听 store 中的方法 F ，F 触发，B 从 store 中拿出传入的值做处理

@NerbraskaGuy 我换种输值就可以直接传输用的 用 push(...) 另一个 js 能接收到的

我对象也试了下 跨 js 确实会失败 当前组建直接用不受影响

@DICK23 destroy 不执行了 感觉这种控制方式影响了整个生命周期的问题了 具体可以看下 下面的代码回复

@yetrun

我的逻辑是动态引入一个文件夹下的所有组件，给与一个状态 compState ，然后通过外部调用改变 store 中这个组件的状态，来控制显隐，比如下面的组件 B 通过 singleComp 控制 A 显示

现在的情况是 我在框架刚开始搭建的时候 onUpdated 会执行以及之后的方法 onBeforeUnmount 等等 onMounted 不执行 组件变多后变成只执行 onMounted 并且关闭再打开 不会再执行 onMounted

不明所以，所以我现在直接放在$onAction 去处理，不再用 vue 的声明周期去控制

具体看代码吧
-------------------------------------------------组件 A-----------------------------------------------------------------------
<template>
<div v-if="compInfo.compState">......</div>
</template>

<script>
import useWatchComp from "@/hooks/useWatchComp.js";

export default {
name: "AAAAAAAA",
setup() {
const { compInfo } = useWatchComp(onMountedFunc, compInfoChange);
function onMountedFunc() {
要初始化的方法。。。。。。
}
function compInfoChange(newInfo) {
状态改变触发的方法
}
return { compInfo};
},
};


-------------------------------------------------组件 B-----------------------------------------------------------------------
<template>
<div v-if="compInfo.compState">
<btn @click="showAAAAAAAA" />
</div>
</template>

<script>
import useWatchComp from "@/hooks/useWatchComp.js";
import useComp from "@/hooks/useComp.js";

export default {
name: "BBBBBBBB",
setup() {
const { compInfo } = useWatchComp(onMountedFunc, compInfoChange);
const { singleComp } = useComp();

function onMountedFunc() {
要初始化的方法。。。。。。
}
function compInfoChange(newInfo) {
状态改变触发的方法
}

function showAAAAAAAA() {
singleComp({
compName: "AAAAAAAA",
compState: true,
compParams: { data: item },
});
}
return {
compInfo,showAAAAAAAA
};
},
};
</script>


-------------------------------------------------useWatchComp.js-----------------------------------------------------------------------

import { computed, getCurrentInstance } from "vue";
import compControl from "@/store/compControl.js";

const useWatchComp = (onMountedFunc, compInfoChange) => {
const instance = getCurrentInstance();
let compStore = compControl();
let compName = instance.type.name;
let compInfo = computed(() => {
return compStore[compName];
});


//我的本意是将传入的 onMountedFunc 方法放入对应的 onMounted 执行 每次组件打开的话对应执行，但有一开始讲述的问题

onBeforeMount(()=>{})
onMounted(()=>{
onMountedFunc()
})
onBeforeUpdate(()=>{})
onUpdated(()=>{})
onBeforeUnmount(()=>{})
onUnmounted(()=>{})





// 组件信息变动
compStore.$onAction(
({
name, store, args,after,onError,
}) => {
after(() => {
//所以我全部放在这里面去执行
onMountedFunc()
});
onError((error) => {});
}
);

return {
compInfo,
};
};
export default useWatchComp;

-------------------------------------------------useComp.js-----------------------------------------------------------------------

import compControl from "@/store/compControl.js";

const useComp = () => {
let compStore = compControl();
// 触发单个组件
const singleComp = ({ compName, compState, compParams = {} }) => {
compStore.singleCompControl({
compName,
compState,
compParams,
});
};
// 触发多个组件
const batchComp = ({ compList, beforeClear = false }) => {
compStore.batchCompControl({
beforeClear,
compList,
});
};

return {
singleComp,
batchComp,
};
};
export default useComp;



-------------------------------------------------store/compControl.js----------------------------------------------------------------------
import { defineStore } from "pinia";
import { forIn } from "lodash";
let files = import.meta.globEager("@/views/components/*.vue");
let state = {};
forIn(files, (value, key) => {
let compName = key.replace(/\/src\/views\/components\/|\.vue/g, "");
state[compName] = {
compName,
compState: false,
compParams: {},
};
});

const useCompStore = defineStore("compControl", {
state: () => {
return state;
},
actions: {
// 批量
batchCompControl({ beforeClear = false, compList }) {
if (beforeClear) {
forIn(state, (value, key) => {
this[key].compState = false;
this[key].compParams = {};
});
}
compList.forEach(({ compName, compState, compParams = {} }) => {
this[compName].compState = compState;
this[compName].compParams = compParams;
});
},
// 单个
singleCompControl({ compName, compState, compParams = {} }) {
this[compName].compState = compState;
this[compName].compParams = compParams;
},
},
});

export default useCompStore;

@ivslyyy 用的就是 v-if watch 具体监听什么？监听这个 store 嘛

@molvqingtai 没用到路由 全局所有组件处在同一阶层上，每个都用 v-if 来控制