[今日白學]元件的基礎的基礎的基礎

#咕咕咕咕咕咕咕咕#

本文章僅用作於個人學習筆記（藍後我就可以亂寫啦）複製程式碼

接上一文章 利用Vue-CLi實現一個簡單的TodoList工具

一、元件化的優點

當TodoList的todo item越來越多的時候，我們應該把它拆分成一個元件進行開發，維護。元件的出現，就是為了拆分Vue例項的程式碼量，讓我們以不同的元件，來劃分成不同功能模組,然後拼接成一個完整的頁面。將來需要怎樣的功能，就去調對應的元件就好了。

目前我能理解的元件化開發的優點如下：

1) 提高開發效率。
2) 方便重複使用。
3) 提升可維護性。複製程式碼

插一張官方文件的圖：

二、註冊元件

在腳手架中我們選中使用 .vue單檔案來開發。一個.vue檔案中具有完整的 template(html)、script、style標籤。

.vue的單檔案可以獲得：

1) 完整語法高亮
2) CommonJS 模組
3) 元件作用域的 CSS ( <style scoped></style> ) 複製程式碼

1.先建立一個TodoList.vue檔案到components資料夾下，建立完後，我們需要在根元件App.vue中引入TodoList.vue並註冊元件。

//匯入的元件需要放入components中複製程式碼

1）在父元件(App.vue)的todo-item中把資料“繫結到”自定義屬性 :content(item的文字) , :time(item的建立時間), :index(陣列的下標)，並新增事件@delect監聽子元件的事件

<todo-item
          v-for="(item,index) in list"
          :key="index"
          :content="item.text"
          :time="item.time"
          :index="index"
          @delect="handleDelect"
        ></todo-item>
複製程式碼

2）子元件(TodoList.vue)通過props來接收父元件傳來的資料渲染頁面。建立點選事件呼叫方法handleDelect方法，方法中使用 $emit 將下標index發射出去(父元件接收用來刪除對應的item)

<template>
  <li>
    <div>{{content}}</div>
    <small>
      <span>建立於:{{time}}</span>
    </small>
    <button @click="handleDelect">刪除</button>
  </li>
</template>
<script>
export default {
  props: ["content", "time", "index"],
  methods: {
    handleDelect() {
      this.$emit("delect", this.index);
    }
  }
};
</script>
複製程式碼

完整程式碼：

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <div>
        <input type="text" placeholder="新增便籤" v-model.trim="inputValue">
        <button @click="handleSubmit">新增</button>
      </div>
      <ul>
        <!-- 把這個元件作為自定義元素來使用 -->
        <todo-item
          v-for="(item,index) in list"
          :key="index"
          :content="item.text"
          :time="item.time"
          :index="index"
          @delect="handleDelect"
        ></todo-item>
      </ul>
    </div>
  </div>
</template>
<script>
// import (引入檔案的檔案命名) from ("檔案的路徑")
import todolist from "./components/TodoList.vue";
export default {
  name: "app",
  // ("元件名"() : (引入檔案的檔案命名)
  components: {
    "todo-item": todolist
  },
  data() {
    return {
      inputValue: "",
      list: []
    };
  },
  methods: {
    handleSubmit() {
      if (this.inputValue != "") {
        this.list.push({
          text: this.inputValue,
          time: new Date().toLocaleString()
        });
        this.inputValue = "";
      }
    },
    handleDelect(index) {
      this.list.splice(index, 1);
    }
  }
};
</script>複製程式碼

TodoList.vue

<template>
  <li>
    <div>{{content}}</div>
    <small>
      <span>建立於:{{time}}</span>
    </small>
    <button @click="handleDelect">刪除</button>
  </li>
</template>

<script>
export default {
  props: ["content", "time", "index"],
  methods: {
    handleDelect() {
      this.$emit("delect", this.index);
    }
  }
};
</script>

<style scoped>
</style>複製程式碼

錯誤可能很多，但我現在還沒看出來hhhhh