Vue中元件化編碼使用、實作元件之間的參數傳遞（實戰練習二）

上一章節實作的是靜态頁面的設計、這一章節實作将資料抽取出來、通過元件間參數的傳遞來實作 ​

文章目錄

• ​​1、元件之間是怎樣實作參數傳遞的？（基本的傳遞方式）​​

• ​​1.1、思路流程​​
• ​​1.2 、代碼流程（有點簡陋）​​
• ​​1.3 代碼（這裡隻給出主要部分代碼、詳細代碼請看上一章節）​​

• ​​1.3.1 App.vuepp.vue(省略了樣式)​​
• ​​1.3.2 TheList.vue (省略了樣式)​​
• ​​1.3.3 TheItem.vue(省略了樣式)​​

• ​​1.4 、實作的效果​​

1、元件之間是怎樣實作參數傳遞的？（基本的傳遞方式）

1.1、思路流程

1、将資料從​

​App.vue​

​​中傳入​

​TheList.vue​

​元件中。

• 2、在​

  ​TheList.vue​

  ​​元件中、通過周遊的形式周遊數組對象、每次周遊出來的對象作為參數傳入​

  ​TheItem.vue​

  ​元件中
• 3、​

  ​TheItem.vue​

  ​接收到傳來的參數就可以展示對象中的屬性

1.2 、代碼流程（有點簡陋）

1.3 代碼（這裡隻給出主要部分代碼、詳細代碼請看上一章節）

1.3.1 App.vuepp.vue(省略了樣式)

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <TheHeader />
        <TheList  :todos="todos" />
        <TheFooter />
      </div>
    </div>
  </div>
</template>

<script>import TheHeader from "./components/TheHeader";
import TheList from "./components/TheList";
import TheFooter from "./components/TheFooter.vue";

export default {
  name: "App",
  components: { TheHeader, TheList, TheFooter },
  data() {
    return {
      //由于todos是MyHeader元件和MyFooter元件都在使用，是以放在App中（狀态提升）
      todos: [
        { id: "001", title: "吃飯", done: true },
        { id: "002", title: "睡覺", done: false },
        { id: "003", title: "打豆豆", done: true },
      ],
    };
  },
  methods: {},
};</script>      

1.3.2 TheList.vue (省略了樣式)

<template>
  <ul class="todo-main">
    <TheItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" />
  </ul>
</template>

<script>import TheItem from "./TheItem";

export default {
  name: "TheList",
  components: { TheItem },
  //聲明接收App傳遞過來的資料，其中todos是自己用的
  props: ["todos"],
};</script>      

1.3.3 TheItem.vue(省略了樣式)

<template>

    <li>
      <label>
        <input type="checkbox" />
        <span>{{todo.title}}</span>
      </label>
      <button>删除</button>
    </li>

</template>

<script>export default {
  name: "MyItem",
      //聲明接收todo、checkTodo、deleteTodo
    props:['todo'],
  data() {},

  methods: {},
};</script>      

1.4 、實作的效果