vue3.0实现todolist(2)组件的定义

雨下听风声

已于 2025-02-28 12:26:22 修改

阅读量155

点赞数

分类专栏： vue-cli3 文章标签： vue

于 2021-04-29 14:45:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33338352/article/details/116265315

版权

vue-cli3 专栏收录该内容

15 篇文章

订阅专栏

本文展示了如何在Vue中进行组件化开发，包括在`home.vue`文件中导入并使用`NavHeader`, `NavMain`, `NavFooter`三个子组件，通过`import`和`export default`实现ES6模块化。每个子组件都有自己的模板、脚本和样式，实现了页面头部、主体和底部的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何定义一个组件：

以home.vue为例

vue3用到的组件都从vue解构，es6提供的语法。

定义组件defineComponent

export default导出调用defineComponent（方法{参数}）

es6模块化 import export

ctx：上下文

export default defineComponent({
//传对象的参数
    name:'home',//组件名称
    //接收父组件的数据
    props:{},
    //定义子组件
    components:{

    },
    setup(props,ctx){
        return{
        
        }
    }
})

实现tolist所需的4个组件

//父组件
<template>
<div>
  <nav-header></nav-header>
  <nav-main></nav-main>
  <nav-footer></nav-footer>
</div>
</template>

<script>
// @ is an alias to /src
import NavHeader from '@/components/NavHeader';
import NavMain from "@/components/NavMain";
import NavFooter from "@/components/NavFooter";
import { defineComponent } from "vue";

export default defineComponent({
  name: "home", //组件名称
  //接收父组件的数据
  props: {},
  //定义子组件
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  setup(props, ctx) {
    return {};
  }
});
</script>

//子组件1
<template>
<div>
    header
</div>
</template>
<script>
    export default{
        
    }
</script>
<style scoped lang='scss'>

</style>

//子组件2
<template>
<div>
    main
</div>
</template>
<script>
    export default{
        
    }
</script>
<style scoped lang='scss'>

</style>

//子组件3
<template>
<div>
    footer
</div>
</template>
<script>
    export default{
        
    }
</script>
<style scoped lang='scss'>

</style>