vue3，通讯方式(pinia和emitter)

父子组件：

// 父：
const childList=[{ // 数据
    name:"child1",
    children:[{
        text:"hello"
    }]
},{
    name:"child2",
    children:[{
        text:"world"
    }]
}]
// 子的close的方法
const closeChildFn = (val) => {
    console.log(val)
}

<Child :data='childList' :title="'我是父'" @close='closeChildFn'></Child>

// 子
const props = defineProps({// 接收数据
    title: String,
    data: Object
})
const emit = defineEmits(['close']);// emit方法名
const closeMySelfFn = () => {
    emit('close',props.data)// 传给父
}

<button @click='closeMySelfFn'>关闭我自己</button>

跨组件：

// 创建store xxStore.ts
import {defineStore} from 'pinia';
import {store} from '@/store'
import {emitter} from '@/utils/mitt'
// 数据
export const xxStore = defineStore({
    id:'xx',
    state:()=>({
        str:'haha',
        list:[{
            id:111,
            name:"hello",
            text:"enheng"
        },{
            id:22,
            name:"world",
            text:"huhu"
        }]
    }),
    actions:{
        changeStr(newVal){
            this.str = newVal
        }
    },
    getters:{
        getStr(state){
            return state.str
        }
    }
})
// 方法
emitter.on('changFn',str);
export default function xxStoreHook(){
    return xxStore(store)
}

// 使用
import {emitter} from '@/utils/mitt'
import xxStoreHook from '@/store/xxStore.ts'
const xxStore = xxStoreHook();// 引入store
// 方法
const changeFn = () => {
    emitter.emit('changeFn','hello,world')
}

console.log(xxStore().getStr) // 获取store里getters里的
console.log(xxStore.str) // 获取store里state里的值
xxStore.changeStr('啦啦啦') // store里的actions

<div>store中str的值为：{{xxStore.str}}</div>
<button @click='changeFn'>点击改变str的值</button>