Vue常用コンポーネントの開発

表示
テキストサイトより多くの拡張コンテンツとより良い読書体験!
実戦:常用コンポーネントの開発
数字入力ボックスには数字しか入力できません.また、2つのショートカットボタンがあり、直接1を減らしたり、1を加えたりすることができます.このほか、初期値、最大/小値を設定し、数値が変更されたときにカスタムイベントをトリガーして親コンポーネントに通知することもできます.
ディレクトリファイル:

index.html入口ページ

input-number.jsデジタル入力ボックスコンポーネント

index.jsルートインスタンス

まずtemplateでコンポーネントのルートノードを定義し、独立したコンポーネントであるため、各propを検証する必要があります.
次に、親コンポーネントにinput-numberコンポーネントを導入します.valueは、v-modelを使用する重要なバインド値です.ほとんどのフォームコンポーネントには、入力ボックス、ラジオボックス、マルチ選択ボックス、ドロップダウンセレクタなどのv-modelが必要です.
Vueコンポーネントの場合、一方向データストリームは、コンポーネント内部からprop valueの値を直接変更することはできません.
解決策は、コンポーネントにdataを宣言し、デフォルトでvalueの値を参照し、コンポーネント内でこのdataを維持することです.

Vue.component('input-number', {
    data() {
        return {
            currentValue: this.value
        }
    }
});

これにより、初期化時に親コンポーネントvalueを参照する問題のみが解決されるが、親コンポーネントからvalueが変更された場合、input-numberコンポーネントのcurrentValueも一緒に更新される.
リスニング(watch),watchオプションは、propまたはdataの変更をリスニングするために使用され、それらが変化すると、watch構成の関数がトリガーされ、ビジネスロジックが完了する.
親コンポーネントから渡されたvalueは、現在の条件(maxより大きいか、またはminより小さい)に合致しない可能性があるため、methodsに正しいupdateValueをフィルタする方法currentValueが記載されている.watch傍受されたデータのコールバック関数には、2つのパラメータが使用可能であり、1つ目は新しい値であり、2つ目は古い値である.
コールバック関数では、thisは現在のコンポーネントインスタンスを指します.したがって、this.updateValue()を直接呼び出すことができる.Vueはprops、data、computedおよびmethodsをエージェントしているからである.
傍受currentValueのコールバックでは、this.$emit('input',val)を使用するとv-modelが変更され、valueはカスタムイベントthis.$emit('on-change',val)がトリガーされ、親コンポーネントの数値入力ボックスの値が変化したことを通知するために使用される.
ライフサイクルon-changeフックにもmountedメソッドが呼び出されたのは、最初の初期化時にupdateValue()もフィルタリングされたためである.valueは、データinputとオリジナルのcurrentValueイベントとがバインドされ、ハンドルchange関数では、現在入力されている時刻数が判定される.
See the Pen Vueコンポーネントの例 by whjin ( @whjin ) on CodePen .https://static.codepen.io/ass...</a>;>
タブページコンポーネント
各ラベル・ページのマスター・コンテンツは、コンポーネントを使用する親によって制御され、この部分はhandleChangeであり、slotの数によってラベル切替ボタンの数が決定される.
ファイルディレクトリ:

slot入口ページ

index.htmlスタイルシート

style.cssラベルページ外層のコンポーネントtabs

tabs.jsラベルページネストされたコンポーネントpane

pane.jsラベルページの内容の表示と非表示を制御し、paneを設定し、data:show命令で要素を制御する必要がある.v-showは、getTabsを使用してすべてのthis.$childrenコンポーネントインスタンスを取得する共通の方法である.paneにmethodsコールバックの方法が使用されている場合、コールバック内のfunctionは現在のVueインスタンス、すなわちthisコンポーネント自体を実行せず、tabsの局所変数を外層に1つ設定して間接的に_this=thisを使用する必要がある.
各thisコンポーネントを巡回した後、そのpaneとlabelを抽出し、nameを構成し、データObject配列に追加する.navListコマンドループ表示v-forヘッダを使用する場合、tabを使用してv-bind:classという名前のtabClsを指し、methods名を動的に設定します.
各classタイトルをクリックすると、tabメソッドがトリガーされ、現在選択されているhandleChangeのインデックス、すなわちtabコンポーネントのpaneが変更されます.nameオプションでwatchが傍受され、変更が発生するとcurrentValueメソッドがトリガーされてupdateStatusコンポーネントの表示状態が更新される.
コンポーネントをネストする方法で、一連のpaneコンポーネントpaneコンポーネントのtabs ; slotコンポーネントおよびtabsコンポーネント通信では、paneおよび$parentのメソッドは、親チェーンおよび子チェーンにアクセスする.定義済み$childrenおよびprop:value,使用data:currentValueで実現$emit('input')の使い方.
See the Pen Vue-tabs by whjin ( @whjin ) on CodePen .https://static.codepen.io/ass...</a>;>