vue学习笔记 五、创建子组件实例

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、样例效果图：

其中Home是父组件，header、main、footer是父组件调用子组件的内容。

注：开发工具是HBuilder X

二、项目结构截图

说明：创建三个子组件NavHeader.vue, NavMain.vue, NavFooter.vue

父组件：Home.vue

三、代码

NavHeader.vue 代码

<template>
     <div>
         header
     </div>
</template>

<script>
export default{

}

</script>

<style scoped lang="scss">
</style>

NavMain.vue 代码

<template>
     <div>
         main
     </div>
</template>

<script>
    //编写js内容
export default{

}

</script>

<style scoped lang="scss">
</style>

NavFooter.vue 代码

<template>
     <div>
         footer
     </div>
</template>

<script>
    //编写js内容
export default{

}

</script>

<style scoped lang="scss">
</style>

Home.vue代码

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

<script>
    //引入子组件
import NavHeader from '@/components/navHeader/NavHeader.vue'
import NavMain   from '@/components/navMain/NavMain.vue'
import NavFooter from '@/components/navFooter/NavFooter.vue'
import {defineComponent} from 'vue'

export default defineComponent({
    name:'Home',
    components:{
        NavHeader,
        NavMain,
        NavFooter
    },
    setup(){

    }
})

</script>

<style scoped lang="scss">
</style>

四、运行+效果

结果窗口出现如下就说明运行成功

浏览器中输入http://localhost:8080/ 就能看到文章最开头的效果