【金秋打卡】第11天-vue3.0实现todolist-原创手记-慕课网

第一模块

课程名称：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>

第四模块

学习截图
图片描述