原理:利用prpos屬性讓父元件給子元件傳遞一個函式,讓子元件在合適的時間段去呼叫該函式,把要傳遞的資料通過引數的形式傳遞給父元件,父元件直接可以接受資料

具體實現過程:程式碼如下

父元件

<template>
 <div id="app">
  <div class="root">
   <div class="todo-container">
    <div class="todo-wrap">
      <!-- 通過props把函式傳遞給子元件 --> 
     <MyHeader :addTodo="addTodo" :todos="todos" />
     <MyList :todos="todos" />
     <MyFooter />
    </div>
   </div>
  </div>
 </div>
</template>
​
<script>
import MyHeader from "./components/MyHeader";
import MyFooter from "./components/MyFooter";
import MyList from "./components/MyList";
export default {
 name: "App",
 components: { MyHeader, MyFooter, MyList },
​
 data() {
  return {
   todos: [
     { id: "001", title: "javascript", done: true },
     { id: "002", title: "vue", done: false },
     { id: "003", title: "react", done: true },
    ],
   };
  },
​
 // 定義一個給子元件傳遞的方法
 methods: {
  // 新增一個代辦事項         
  addTodo(todoObj) {
    // 這裡的引數todoObj就是子元件給父元件傳遞的資料
   this.todos.unshift(todoObj);
   },
  },
};
</script>
 

子元件

export default {
 name: "MyHeader",
 // 這裡的addTodo就是父元件傳遞過來的函式
 props: ["addTodo", "todos"],
 data() {
  return {
   title: "",
   // 是否已有該代辦事項,預設值為false
   isContainTodoObj: false,
   };
  },
​
 methods: { 
  add() {
   if (!this.title) return alert("輸入不能為空");
​
   // 判斷當前數組裡面是否已包含該代辦事項
   this.todos.forEach((todoObj) => {
    if (this.title == todoObj.title) {
     this.isTodoObj = true;
     }
    });
​
   // 判斷使用者輸入是否為空
   if (this.isTodoObj) {
    this.isConfirm = confirm(`已包含待辦事項${this.title},是否還要新增`);
    }
​
   // 判斷已有待辦事項使用者是否點選確認,或者還沒有待辦事項
   if (this.isConfirm || !this.isTodoObj) {
    // 把使用者輸入的待辦事項包裝成一個物件
    const todoObj = { id: nanoid(), title: this.title.trim(), done: false };
​
    // 給APP元件傳遞一個todo物件  
    // ---這裡就是去呼叫父元件傳遞過來的函式,把需要傳給給父元件資料以引數的形式傳遞進去
    this.addTodo(todoObj);
​
    // 使用者輸入完畢之後讓輸入框為空
    this.title = "";
    }
   },
  },
};
</script>
​