Vue—同级组件之间数据传输

同级组件数据传输：数据放在父组件，父传子，子传父(使用props属性，传输函数)
父传子：父组件保存数据，子组件用props接收父组件传输的数据
App.vue

<template>
<!--子组件接收外部数据-->
      <TodoList :todos="todos"></TodoList>
</template>
<script>
export default{
    name:'App',
    components:{TodoTop,TodoFooter,TodoList},
     data(){
        return{
        //父组件存储数据
            todos:[
                {id:"01",title:'吃饭',done:true},
                {id:"02",title:'睡觉',done:false},
                {id:"03",title:'打豆豆',done:true},
            ]

        }
       
    }
    }
    </script>

TodoList.vue

<template>
    <ul class="todo-main">
    <!--将父组件传来的数据遍历-->
        <TodoItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" ></TodoItem>
        
      </ul>
</template>
<script>

import TodoItem from './TodoItem.vue'
export default {
    name: "TodoList",
    components: { TodoItem },
    //子组件接收父组件传来的数据
    props:['todos']
}
</script>

子传父：
法一：父组件保存函数，子组件用props接收父组件函数
App.vue

<template>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
    <!--子组件接收父组件函数-->
      <TodoTop :addTodo="addTodo"></TodoTop>
    </div>
  </div>
</div>

</template>
<script>
import TodoList from './components/TodoList.vue'
export default{
    name:'App',
    components:{TodoTop},
     methods: {
        //父组件函数，将接受到的数据添加到数组中
          addTodo(TodoObj){
            console.log("App组件接收数据接收数据",TodoObj)
            //向对象数组头部添加对象元素
             this.todos.unshift(TodoObj)
           
          }
        }
    
}
</script>

todoTop.vue

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add"/>
      </div>
</template>
<script>
import { nanoid } from 'nanoid'
export default {
    name:'TodoTop',
    props:['addTodo'],
    methods:{
      add(){
        //将用户输入包装成一个对象
        if(this.title.trim()) return alert("输入不为空")
        const todoObj={id:nanoid(),title:this.title,done:false}
        //console.log(todoObj)
        //将对象添加到(APP)父组件
        this.addTodo(todoObj)
        this.title=''
      }
    }
}
</script>

法二：用v-model但不推荐