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 由三个子组件组成分别是：navHeader、navMain、navFooter

要完成的功能说明：

navHeader组件：输入新的任务，点击回车如果新的任务navMain中没有则添加到navMain中。

navMain组件：展示任务，点击“删除按钮”则删除当前任务，多选框可以多选任务。

navFooter组件：记录任务完成的数量（多选框选中为完成）、总数，以及点击“清除已完成”按钮删除navHeader中的已完成任务。

注：本实例先把框架搭建出来，后面会逐步完成描述的功能。

二、项目结构截图

三、代码

Home.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<template>     <div>         <nav-header></nav-header>         <nav-main></nav-main>         <nav-footer></nav-footer>     </div> </template>   <script>     //编写js内容 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>

NavFooter.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<template>      <div  >          <div>已完成{{isComplete}} /全部{{all}}</div>          <div v-if="isComplete >0" class="btn">             <button @click="clear">清除已完成</button>          </div>      </div> </template>   <script> import {defineComponent,ref} from 'vue' export default defineComponent({     name:'navFooter',     setup(){         let isComplete = ref(1)         let all =ref(3)                   let clear = ()=>{             console.log('clear')         }                   return{             isComplete,             all,             clear         }     }        })             </script>   <style scoped lang="scss">        </style>

NavHeader.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<template>      <div>         <input         placeholder="请输入任务名称"         v-model="value"         @keydown.enter="enter"         />      </div> </template>   <script> import {defineComponent,ref} from 'vue' export default defineComponent({     name:'navHeader',     setup(){         let value=ref('')         //按回车确认         let enter = () => {             console.log(value.value)         }         return{             value,             enter         }     } })             </script>   <style scoped lang="scss"> input{     margin-bottom: 10px; } </style>

NavMain.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<template>      <div v-for="(item,index) in list" :key ="index">          <div >              <input type="checkbox" v-model="item.complete"/>              {{item.title}}              <button  @click="del(item,index)">删除</button>          </div>      </div> </template>   <script> import {defineComponent,ref} from 'vue' export default defineComponent({     name:'navMain',     setup(){         let list =ref([         {             title:'吃饭',             complete:false         },{             title:'睡觉',             complete:false         },{             title:'敲代码',             complete:false         },                       ])                   //删除任务         let del =(item,index)=>{             console.log(item)             console.log(index)         }                   return{             list,             del         }               } })             </script>   <style scoped lang="scss">          </style>