Vueベースコンポーネント

この文章は個人の学習ノートにしか使われていません(青の後、私はむやみに書くことができます)
一、コンポーネント化の利点TodoListのtodo itemがますます多くなると、私たちはそれを1つのコンポーネントに分割して開発し、維持しなければならない.コンポーネントの出現は、Vueインスタンスのコード量を分割するために、異なるコンポーネントで異なる機能モジュールに分割し、完全なページにつなぎ合わせましょう.将来どのような機能が必要なのか、対応するコンポーネントを調整すればよい.
現在私が理解できるコンポーネント化開発の利点は以下の通りです.
1)開発効率の向上.2)再利用しやすい.3)保守性の向上.公式ドキュメントの図を挿入します.
 
二、登録コンポーネントは足場で選択して使用します.vue単一ファイルを開発します.ひとつvueファイルには完全なtemplate(html)、script、styleラベルがあります.
.vueの単一ファイルを入手できます.
1)完全構文ハイライト2)CommonJSモジュール3)コンポーネント役割ドメインのCSS(<span class="md-tag">)1.まずTodoListを作成する.vueファイルはcomponentsフォルダの下にあります.作成後、ルートコンポーネントでAppする必要があります.vueにはTodoListが導入する.vueコンポーネントを登録します.//インポートしたコンポーネントはcomponentsに入れる必要があります
導入に成功したかどうかを確認します.
 
2.次に、前のliタグの内容をTodoListに移植します.vueで.親子コンポーネント間の通行はpropsと$emitを使用します.
サブコンポーネントはpropsを使用して親コンポーネントから送信された値を受信します.サブコンポーネントは$emitを使用してイベントとデータを送信します.サブコンポーネントデータが必要な親コンポーネントカスタムイベントを追加して、サブコンポーネント1をリスニングします.親コンポーネント(App.vue)のtodo-itemでデータをカスタム属性にバインドします.content(itemの文字)::time(itemの作成時間)::index(配列の下付き)、イベント@delectリスニングサブコンポーネントのイベントを追加します.

2)サブアセンブリ(TodoList.vue)は、propsを介して親アセンブリからのデータレンダリングページを受信する.クリックイベント呼び出しメソッドhandleDelectメソッドを作成し、$emitを使用して下付きindexを送信します(親コンポーネントは対応するitemを削除するために受信します)

export default </span>{<span style="color: #ff0000;">

  props</span>:<span style="color: #0000ff;"> ["content", "time", "index"],

  methods: {

    handleDelect() {

      this.$emit("delect", this.index)</span>;

    }<span style="color: #800000;">

  }

};



//

//    ：

//App.vue





// import (         ) from ("     ")

import todolist from "./components/TodoList.vue";

export default </span>{<span style="color: #ff0000;">

  name</span>:<span style="color: #0000ff;"> "app",

  // ("   "() : (         )

  components: {

    "todo-item": todolist

  </span>}<span style="color: #800000;">,

  data() </span>{<span style="color: #ff0000;">

    return {

      inputValue</span>:<span style="color: #0000ff;"> "",

      list: []

    </span>}<span style="color: #800000;">;

  },

  methods: </span>{<span style="color: #ff0000;">

    handleSubmit() {

      if (this.inputValue != "") {

        this.list.push({

          text</span>:<span style="color: #0000ff;"> this.inputValue,

          time: new Date().toLocaleString()

        </span>}<span style="color: #800000;">);

        this.inputValue = "";

      }

    },

    handleDelect(index) </span>{<span style="color: #ff0000;">

      this.list.splice(index, 1);

    </span>}<span style="color: #800000;">

  }

};



TodoList.vue





export default </span>{<span style="color: #ff0000;">

  props</span>:<span style="color: #0000ff;"> ["content", "time", "index"],

  methods: {

    handleDelect() {

      this.$emit("delect", this.index)</span>;

    }<span style="color: #800000;">

  }

};

間違いは多いかもしれませんが、私はまだhhhhを見ていません.