v-modelを使用してコンポーネントの表示と非表示を制御する

以前にivewコンポーネントライブラリを使用していたとき、そのコンポーネントライブラリのモーダルがvモデルを使用して表示と非表示を制御する方法を常に疑問に思いました。私の印象では、v-modelはビューとモーダルの間の双方向データバインディングに使用されています。公式Webサイトにも情報があります。

公式ウェブサイトには、入力、選択、その他のタグの説明がありますが、divはありません。通常、コンポーネントをカスタマイズする場合、最も外側のレイヤーはdivのセットです。コントロールが表示および非表示になっている場合、v-ifを使用して親コンポーネントを介してプロパティを制御します。ただし、iviewコンポーネントは属性を渡しませんが、v-modelを直接コントロールに渡します。これは非常に興味深いことです。また、v-modelを使用してdivの表示と非表示を自分で制御したい場合はどうでしょうか私はiviewコンポーネントのソースコードを見ていません。また、それらがどのように記述されているのかわかりませんが、その効果を達成する方法はあります。多分あなたはそれを試すことができます。

Modal.vue

1 <テンプレート>
 2    <div class = "modal-container" v- if = "showModal">
 3      <p>我就是一段文字而既。</ p>
 4      <div class = "bottom-btn">
 5        <ボタン>确定</ button>
 6        <button @ click = "clickCancel">取消</ button>
 7      </ div>
 8    </ div>
 9 </ template>
 10  
11 <script>
 12 export default {
 13    props：{
 14      値：{
 15        デフォルト：true 、
16        タイプ：ブール
 17     }
 18    }、
 19    ウォッチ：{
 20      value（val）{
 21        this .showModal = val;
22      }、
 23      showModal（val）{
 24        this。$ emit（ "input" 、val）;
25      }
 26    }、
 27    data（）{
 28      return {
 29        showModal：false 
30      };
31    }、
 32    メソッド：{
 33  clickCancel     （）{
 34        this .showModal = false ;
35     }
 36    }、
 37    Mounted（）{
 38    }
 39  };
40 </ script>
 41  
42 <style scoped >
 43 .modal- container {
 44    background：#eee;
45    幅：300ピクセル;
46    高さ：240ピクセル。
47    位：絶対;
   トップ48：0 ;
   左49：0 ;
   右50：0 ;
   下部51：0 ;
52    マージン：自動;
53    border- radius：10px;
54  }
55 .bottom- btn {
 56    display：flex;
57    align-items：flex- end;
58の    高さ：70％;
59    正当化- コンテンツ：センター。
60  }
 61 .bottom- btn button {
 62    アウトライン：なし。
63    ボーダー：なし。
64    幅：70ピクセル。
65の   高さ：40px;
66    ライン- 高さ：40ピクセル;
67    テキスト-配置：中央。
68  }
 69 </ style>

最初にModalコンポーネントを作成し、変数showModalを定義してコンポーネントを表示するかどうかを制御します。このコンポーネントは内部的に値属性を受け取ります。これはブール値であり、主にこの外部値によって非表示の表示を判断しますが、Vueはそうではありません親コンポーネントから渡されたデータを直接変更することをお勧めします。そのため、値をshowModalに割り当てます。非常に重要なステップは、ここでのリスナーです。値の値をリッスンし、コンポーネント内のshowModalをリッスンします。値が外部に渡されると、値の変更によってこのリスナーがトリガーされ、値がここでshowModalに表示され、showModalがバインドされますv-if。キャンセルボタンがクリックされると、showModalの変更が監視されるため、入力イベントが送信されますが、この入力イベントは親コンポーネントに送信されず、div自体の入力イベントを直接トリガーします。イベントを送信するとき、親コンポーネントはイベントを実装する必要があります。この例では、親コンポーネントが入力を実装していないことは明らかですが、親コンポーネントの値が変更されています。実際、ここでの説明と公式Webサイトを組み合わせると、「v-model 基本的には単なる構文上の砂糖です。ユーザーの入力イベントをリッスンしてデータを更新し、極端なシナリオで特別な処理を実行する責任があります。」

div自体に入力イベントがあるため、あまり使用されません。divタグのcontenteditable属性をtrueに設定して、divを入力ボックスに変換します。これにより、divに入力ボックスの関数とイベントが確実に含まれます。したがって、親コンポーネントが子コンポーネントによって送信されたイベントを実装する必要がない理由は、送信されたイベントが自身の入力を直接トリガーするためです。トリガーの後、vueは入力イベントによって渡された値をv-modelに自動的に割り当てますバインドされた値、次にModalコンポーネントがfalseへの値の変更をリッスンし、その値をshowModalに割り当てます。少し丸く見えるかもしれませんが、こんな感じです。

HelloWorld.vue：

<template> 
  <div> 
    <button @ click = "clickOpen">打开弹出枠</ button> 
    <Modal v-model = "openModal"> </ Modal> 
  </ div> 
</ template> 

<script> 
からモーダルをインポート "./モーダル" ; デフォルトの
エクスポート{ 
  名前： "HelloWorld" 、
  コンポーネント：{ 
    Modal 
  }、
  data（）{ 
    return { 
      openModal：false 
    }; 
  }、
  メソッド：{ 
    inputContent（val）{ 
      console.log（val）
    }、
    clickOpen（）{ 
      this。
}; 
</ script>

このようにして、属性を使用せずにvモデルを通じてdivの非表示と表示を制御できます。実際、v-モデルがなくても、直接実装できます。つまり、属性を使用して、サブコンポーネントが属性を介してv-ifをバインドできるようにします。これは、Modalもv-ifコントロールを本質的に使用しているためです。実際、違いはありません。iviewの実装方法に興味があります。もちろん、結局のところ、私はiviewのソースコードを読んだことがないので、彼らがこれを行ったかどうかは不明ですが、これは単なる方法です。あまり気にしないでください。詳細を学んでも害はありません。

v-modelを使用してコンポーネントの表示と非表示を制御する

おすすめ