vue小案例

組件化編碼流程

1.拆分靜態(tài)組件，按功能點拆分
2.實現(xiàn)動態(tài)組件
3.實現(xiàn)交互

1.父組件給子組件傳值

父組件給子組件傳值
1.在父組件中寫好要傳的值，在子組件中接受

傳值

 <List :todoList="todoList"></List>

接受

props:['todoList']

2.通過APP組件給子組件傳值。

1.在app的methods方法中添加一個方法receive用于接受子組件傳遞的值。
2.在子組件中通過props接受app組件傳遞的方法receive。
3.調(diào)用receive方法傳遞子組件想要傳遞的值。
4.在app父組件中接受子組件傳遞的值。

在app的methods方法中添加一個方法receive用于接受子組件傳遞的值

methods:{receive(res){this.todoList.unshift(res)}}

在子組件中通過props接受app組件傳遞的方法receive

 props:['receive'],
//傳值this.receive(addObj)

在app父組件中接受子組件傳遞的值。

 receive(res){this.todoList.unshift(res)}

3.案例實現(xiàn)

<template> <div><div class="content"><Header :receive="receive"></Header><List :todoList="todoList" :handcheck="handcheck" :deleteHand="deleteHand"></List><Footer :todoList="todoList" :isALL="isALL"></Footer></div></div>
</template><script>
import Footer from './components/Footer.vue'
import List from './components/List.vue'
import Header from './components/Header.vue'
export default {name:'App',data(){return{todoList:[{id:'001',title:"睡覺",done:true},{id:'002',title:"學(xué)習(xí)",done:true},{id:'003',title:"喝酒",done:false},]}},components:{Footer,Header,List},methods:{// 添加receive(res){this.todoList.unshift(res)},// =改變handcheck(id){console.log(id)this.todoList.forEach((todo)=>{if(todo.id===id)todo.done=!todo.done})},deleteHand(id){this.todoList=this.todoList.filter((todo)=>{return todo.id!==id})},isALL(done){this.todoList.forEach((todo)=>{todo.done=done})}}
}
</script><style >.content{width: 500rpx;height: 500rpx;border-radius: 20rpx;border: 5rpx solid black;}
</style>

<template><div><Item v-for="item in todoList" :key="item.id" :todo="item" :handcheck="handcheck" :deleteHand="deleteHand"></Item></div>
</template><script>
import Item from './Item.vue'
export default {name:"List",components:{Item},props:['todoList','handcheck','deleteHand'],
}
</script><style></style>

4.項目小細(xì)節(jié)

nanoid （生成唯一id）
1.下載naoid npm i nanoid，
2.使用nanoid 在項目中 import {nanoid} from ‘nanoid’，
3.使用 id:nanoid