第一模块

课程名称：vue3.0实现todolist

章节名称：

• 3-1 介绍定义组件

讲师姓名：五月的夏天

第二模块

课程内容(概述)

1、组件是什么?组件是维护单一功能，可复用的单个个体

2、组件复用的优点。方便维护，复用性增强，需求改动修改组件会非常方便

3、如何创建组件并引入使用

第三模块

创建组件文件

在views底下新建一个父组件Home.vue，在components中创建三个文件夹，三个子组件navheader，navmain，navfooter

编写代码

Home.vue文件代码内容如下

• 引入3个子组件组件

  import NavHeader from '@/components/navHeader/NavHeader.vue'
  import NavMain from '@/components/navMain/NavMain.vue'
  import NavFooter from '@/components/navFooter/NavFooter.vue'
  

• 把定义组件的函数defineComponent从vue中解构出来

  import { defineComponent } from 'vue'
  

• 定义组件结构脚本并注册使用NavHeader、NavMain、NavFooter组件

  export default defineComponent({
    name: "Home",
    props: {},
    components: {
      NavHeader,
      NavMain,
      NavFooter,
    },
    setup(props, ctx) {
    }
  });
  

• 使用NavHeader、NavMain、NavFooter组件

  <template>
    <div>
      <nav-header></nav-header>
      <nav-main></nav-main>
      <nav-footer></nav-footer>
    </div>
  </template>
  

定义组件，在Vue3需要用到的Api都要先从vue对象中解构出来。并通过export default导出。

引入使用

在App.vue引入使用

<template>
  <HomeView />
</template>
<script>
import HomeView from './views/Home.vue'
export default {
  name: 'App',
  components: {
    HomeView
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第四模块

学习截图