TestChamberBlockly/src/components/header/header.vue

<template>
    <div id="header">
        <div class="header-left">
            <headerLeftVue @setFileName="setFileName" :exportImportFileName="exportImportFileName"/>
        </div>
        <div class="header-right">
            <headerRightVue @setFileName="setFileName" :exportImportFileName="exportImportFileName" />
        </div>
    </div>
</template>
<script setup>
import {ref,watchEffect} from 'vue'
import headerLeftVue from "./headerLeft.vue";
import headerRightVue from "./headerRight.vue";
import store from '../../stores/blockly'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法

const exportImportFileName = ref(t('message.untitled'))
const setFileName = (e)=>{
    exportImportFileName.value = e
}
</script>
<style lang="scss" scoped>
#header {
    width: 100%;
    height: 60px;
    display: flex;
    padding: 0 10px;

    .header-right{
        width: 100%;
    }
}
</style>