vueコンポーネントとは何ですか

vue では、コンポーネントは再利用可能な Vue インスタンスです。一意のコンポーネント名が付いています。HTML 要素を拡張し、コンポーネント名をカスタム HTML タグとして使用できます。コンポーネントにより、コードの再利用が大幅に向上します。

このチュートリアルの動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

コンポーネントとは何ですか?

コンポーネントは Vue の重要な概念です。再利用可能な Vue インスタンスです。一意のコンポーネント名があります。HTML 要素を拡張し、コンポーネント名をカスタマイズされた HTML として使用できます。ラベル。コンポーネントは再利用可能な Vue インスタンスであるため、データ、計算済み、監視、メソッド、ライフサイクル フックなどの new Vue() と同じオプションを受け取ります。唯一の例外は、el などのルート インスタンス固有のオプションです。

いくつかの共通モジュールを抽出し、それらを別のツール コンポーネントまたはページに書き込み、必要なページに直接導入できます。その後、それをコンポーネントとして抽出して再利用できます。

たとえば、複数のページで同じコンポーネントが使用されている場合、それらをコンポーネント化できるため、コードの再利用率が向上します。

Vue コンポーネントの使用

まずディレクトリについて話しましょう

1. コンポーネント B.vue を作成します

##同様に、 Create新しい hello_word.vue を親として

# すると、次のような結果が表示されます

Keyポイント:

B.vue モジュールを

hello_word.vue に導入します // showB を './B.vue' からインポートします コンポーネントを導入します

#B ファイルのカスタム モジュール名 showB

登録されたコンポーネント

 components:{
          showB,        
        },
<showB /> //使用组件

注: コンポーネント名は次のようにキャメルケースで定義します。 PascalCase を使用する kebab-case を使用する

メイン トピック props の開始

親コンポーネントは値を子コンポーネントに渡します(親コンポーネントは次のようなデータをバインドします: value="It's time to work "、子コンポーネントは props を通じてそれを取得します) 子コンポーネントの props オプションは、親コンポーネントからデータを受け取ることができます。 Props は一方向にバインドされており、親コンポーネントから子コンポーネントにのみ渡すことができ、その逆には渡すことができません。 使用法は次のとおりです。

B コンポーネント

親コンポーネント

次に、 「ページに移動して

# を表示します。作成された

# の下にある value の値を出力します。結果は # です。

##子コンポーネントは親コンポーネントに値を渡します

#子コンポーネント内:

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }

親コンポーネント:

DOM に @msg='msg' を導入します

<showB :value=&#39;text&#39; @msg=&#39;msg&#39;/> 
 msg(val){
                 console.log(val,&#39;val&#39;)
                 }

メソッドを通じて受信します

#実行、クリックして親コンポーネントに応答します

結果の印刷:

プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 ！

以上がvueコンポーネントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。