Vue学习（十三）todoList小案例

todoList案例总结

组件化编码流程

1. 拆分静态组件：按功能拆分成对应组件，命名不要与html元素冲突
2. 实现动态组件：考虑好数据存放位置，数据的使用一个组件还是多个组件
   (1). 一个组件使用：放在组件自身
   (2). 多个组件使用：放在共同的父组件上（状态提升）
3. 实现交互，绑定事件等等

props

1. 父组件==>子组件的通信
2. 子组件==>父组件的通信，首先要父组件给子组件一个函数
3. props传入的是对象类型的值，修改对象中的属性Vue不会报错，但是不推荐这样做

v-model：v-model绑定的值不能是props传过来的值，因为props是不可修改的

App.vue

<template>
    <div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
                <MyHeader :addTodo="addTodo"/>
                <MyList 
					:todoList="todoList" 
					:checkTodo="checkTodo"
					:deleteTodo="deleteTodo"
				/>
                <MyFooter 
					:todoList="todoList" 
					:checkAllTodo="checkAllTodo" 
					:deleteAllDoneTodo="deleteAllDoneTodo" 
				/>

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

<script>

    import MyHeader from './components/MyHeader'
    import MyList from './components/MyList'
    import MyFooter from './components/MyFooter'

    export default {
   
        name: "App",
        // 注册组件
        // components: [MyHeader/* , MyList, MyFooter */]
        components: {
   MyHeader, MyList, MyFooter},
		data() {
   
			return {
   
				todoList: [
					{
   id: '00001', title: "吃饭", done: true},
					{
   id: '00002', title: "打游戏", done: false},
					{
   id: '00003', title: "学习", done: false},
				]
			}
		},
		methods: {
   
			addTodo(todoObj) {
   
				this.todoList.unshift(todoObj);
			},
			checkTodo(todoId) {
   
				// console.log(todoId)
				this.todoList.forEach((todo) => {
   
					if (todo.id === todoId) todo.done = !todo.done;
				})
			},
			deleteTodo (todoId) {
   
				/* this.todoList = this.todoList.filter((todo) => {
					return todo.id !== todoId
				}) */
				this.todoList = this.todoList.filter(todo => todo.id !== todoId)
			},
			checkAllTodo(done) {
   
				/* this.todoList.forEach((todo) => {
					todo.done = done
				}); */
				this.todoList.forEach(todo => todo.done = done