Vue3组件开发-GlobalHeader

这个组件比上面一个组件简单多了，但是我在写的时候还是遇到了奇奇怪怪的问题。

1 环境

主要用到的环境是VScode+TS+VUE3+Bootstrap

这个就是一个brandbar，头部导航条，逻辑方面就是判断是否登录，如果登录了那么就显示XXX欢迎，如果是未登录那么就是，登录以及注册的按钮跳转。

2 代码

2.1 GlobalHeader组件：

代码：

//创建一个globalheader组件
<template>
    <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
    <a class="navbar-borand" href="#" :style="{color :'black', fontSize: '18px'}">者也专栏</a>
    <ul v-if="!user.isLogin" class="list-inline mb-0">
        <li class="list-inline-item"><a href="#" class="btn-outline-light my-2 " :style="{color :'black', fontSize: '18px'}">注册</a></li>
        <li class="list-inline-item"><a href="#" class="btn-outline-light my-2" :style="{color :'black', fontSize: '18px'}">登录</a></li>
    </ul>
    <ul v-else class="list-inline mb-0">
        <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2" :style="{color :'black', fontSize: '18px'}">你好{{user.name}}</a></li>
    </ul>
    </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>

2.2数据：

App.vue

代码：

const currentUser: UserProps = {
  // isLogin: false
  isLogin: true,
  name: 'aFang'

}

加上上次的：

<template>
<div class="container">
  <global-haeder :user="currentUser"></global-haeder>
  <column-list :list="list"></column-list>
</div>
</template>

<script lang="ts">
import {
  defineComponent
} from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css' // 引入bootstrap
import ColumnList, {
  ColumnProps
} from './components/ColumnList.vue'
import GlobalHaeder, { UserProps } from './components/GlobalHeader.vue'
const currentUser: UserProps = {
  // isLogin: false
  isLogin: true,
  name: 'aFang'

}
const testData: ColumnProps[] = [{
  id: 1,
  title: 'test1的专栏',
  description: '知乎专栏的描述',
  avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'

}, {
  id: 2,
  title: 'test2的专栏',
  description: '知乎专栏的描述',
  avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'

}, {
  id: 3,
  title: 'test3的专栏',
  description: '知乎专栏的描述'

}, {
  id: 4,
  title: 'test4的专栏',
  description: '知乎专栏的描述',
  avatar: ''

}]
export default defineComponent({
  name: 'App',
  components: {
    ColumnList,
    GlobalHaeder
  },
  setup () {
    return {
      list: testData,
      currentUser
    }
  }
})
</script>

<style>

</style>

3 运行

终端输入命令：

npm run serve

运行效果

1. 登录

   

2. 未登录