2、GlobalHeader.vue

一、components/GlobalHeader.vue

<template>
  <nav class="navbar navbar-light bg-light border mb-2" style="color:#fff">
    <div class="container">
      <a class="navbar-brand" href="#"> 中地日报 </a>
      <div v-if="!user.isLogin" >
        <button class="btn btn-primary" style="margin-right:20px">登录</button>
        <button class="btn btn-success">注册</button>
      </div>
      <div v-else class="list-line mb-0">
        <button class="btn btn-success">{{user.name}}</button>
      </div>
    </div>
  </nav>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
export interface UserProps {
  isLogin: boolean;
  name?: string;
  id?: number;
}
export default defineComponent({
  name: "GlobalHeader",
  props: {
    user: {
      type: Object as PropType<UserProps>,
      required: true
    },
  }
});
</script>

二、App.vue

<template>
<div class="container">
  <global-header :user="user"></global-header>
</div>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader,{UserProps} from './components/GlobalHeader.vue'
const currentUser:UserProps ={
  isLogin:false,
  name:"中地数码",
  id:430000
}
export default defineComponent({
  name: 'App', 
  components: {
    GlobalHeader
  },
  setup(){
    return {
      user:currentUser
    }
  }
})
</script>