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

<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

<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

<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

<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>