Vue.js-関数化コンポーネント

ラーニングノート:関数コンポーネント
関数コンポーネント
Vueは、functionalに設定されたブール値オプションを提供し、trueに設定すると、コンポーネントにステータスなしおよびインスタンスなし、すなわちdataおよびthisコンテキストなしにすることができる.これにより、render関数で仮想ノードを返すと、関数化コンポーネントが1つの関数にすぎないため、レンダリングコストが大幅に小さくなります.
関数化コンポーネントを使用する場合、Render関数は、一時コンテキストを提供するために2番目のパラメータcontextを提供します.コンポーネントに必要なdata、prop、slots、children、parentは、このコンテキストによって伝達される.例えば、this.levelをcontext.props.levelに書き換え、this.$slots.defaultをcontext.childrenに変更する.
データ・インテリジェントに基づいて異なるコンポーネントを選択するシーンを関数化コンポーネントで示します.
See the Pen Vue-関数化コンポーネント-データに基づいてコンポーネントby whjin(@whjin)on CodePenを選択する.See the Pen Vue-createElement by whjin (@whjin) on CodePen.</p><br><script async src="https://static.codepen.io/ass...;>
JSX書き方:
See the Pen Vue-JSX by whjin (@whjin) on CodePen.See the Pen Vue-ソート可能テーブルコンポーネントby whjin(@whjin)on CodePen.</p><br><script async src="https://static.codepen.io/ass...;>
実戦:メッセージリスト
必要なデータにはニックネームと伝言内容があり、配布操作はルートインスタンスappで完了しなければならない.伝言リストのデータもappから取得した.
配列listはすべてのメッセージ内容を格納し、関数handleSendを通じてlistにメッセージデータを追加し、追加してtexrareaテキストボックスを空にします.
Render関数内のノードは、v-model:動的バインドvalue:を使用し、inputイベントを傍受し、入力した内容を$emit('input')を介して親コンポーネントに送信します.
リストデータlistが空の場合、「リストが空」の情報プロンプトノードがレンダリングされます.空でない場合、各list-itemはニックネーム、伝言内容、返信ボタンの3つのサブノードを含む.this.list.forEachはtemplateの中のv-for命令に相当し、各伝言を遍歴している.ハンドルhandleReplyは、親コンポーネントに直接イベントreplyを送信し、親コンポーネント(app)が受信した後、現在のlist-itemのニックネームを抽出し、v-textareaに設定します.
See the Pen Vee-伝言リストby whjin(@whjin)on CodePen.