Vue2.0でコンポーネントと親子コンポーネント通信を実装する方法

この記事は主にVue2.0学習におけるVueコンポーネントと親子コンポーネント通信の詳細な説明を紹介していますが、編集者が非常に良い内容だと思ったので、参考として共有させていただきます。エディターをフォローして一緒に見てみましょう

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

vue のコンポーネントは、コンピューター内のすべてのコンポーネント (ハードディスク、キーボード、マウスなど) と同じように、実際にはページの一部であり、独立したロジックまたはインターフェイスを持ち、同時に相互作用することができます。指定されたインターフェイス ルールに統合します。

ページはこのようにナビゲーション、リスト、ポップアップウィンドウ、ドロップダウンリストなどのパーツで構成されています。ページはこれらのコンポーネントの単なるコンテナであり、コンポーネントが不要になった場合、またはコンポーネントを置き換えたい場合は、コンポーネントの動作に影響を与えることなく、いつでも置き換えたり削除したりできます。アプリケーション全体。

フロントエンドのコンポーネント化の中心的な考え方は、巨大で複雑なものを適度な粒度で小さなものに分割することです。

コンポーネントを使用する利点は何ですか?

1. 開発効率の向上
2. 再利用に便利
4. プロジェクト全体の保守性の向上
5. vue のコンポーネント

vue.js のコンパイラーは、それに特別な関数を追加します。vue のコンポーネントは、ネイティブ HTML 要素を拡張し、コンポーネントの基本コンポーネント (スタイル構造、動作ロジック、データ) をカプセル化することもできます。

グローバル登録

はどのテンプレートでも使用できますが、使用前に登録する必要があります

構文: Vue.component (コンポーネント名、オプションオブジェクト)を使用します

コンポーネント名の命名規則: キャメルケース、ローストされた文字列

HTML でコンポーネントを使用する: 文字列命名メソッドを使用します

たとえば、 を使用する場合は Vue.compontent('my-compontent',{}) を登録します

<p id="app">
    <h2 id="自定义下拉框">自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        
      }
    },
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" value="">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

を使用する場合は

の場合、ページ上でこのコンポーネントを呼び出すだけで済み、何度でも使用できます。

Component.png

部分登録

コンポーネントインスタンスのオプションオブジェクトを通じて登録され、登録されたスコープでのみ使用されます

<p id="app">
    <h2 id="自定义下拉框">自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  new Vue({
    el:"#app",
    components:{
      &#39;cus-list&#39;:{
        template:`
          <section>
            <p>
              <p>
                <input type="text">
                <input type="button" name="" value="">
                <span></span>
              </p>
            </p>
          </section>
        `
      }
    },
    data:{
      
    }
  })
</script>

部分的に登録されたコンポーネント、現在のインスタンスのスコープでのみ使用できますのみ使用され、スコープ内で再利用することもできます。効果は次のとおりです。

Component.png

親コンポーネントと子コンポーネント間の通信

親コンポーネントは子コンポーネントと通信します

親コンポーネント===》子コンポーネント(propsを使用)

コンポーネントインスタンスのスコープは次のとおりです孤立している場合、子コンポーネントは親コンポーネントのデータを直接使用できません。

カスタム属性を使用してコンポーネントにデータをバインドし、props を使用してコンポーネントに表示される属性名をカスタマイズできます。

つまり、ある一文を覚えておいてください、親コンポーネントが子コンポーネントに値を渡すとき、コンポーネントを呼び出すときにコンポーネントに属性を追加し、それをコンポーネント内で受け取るために props を使用することができます。コンポーネント内の属性名に従って使用されます。

<p id="app">
  <h2 id="自定义下拉框">自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  Vue.component(&#39;cus-list&#39;,{
    data(){

    },
    props:[&#39;btnValue&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

ページ効果

props pass value.png

子コンポーネントは親コンポーネントと通信します

子コンポーネント ===>>親コンポーネント

はカスタム時間を使用する必要があります、親コンポーネントは $ を使用してカスタム イベントをリッスンし、 $emit は親コンポーネントが処理するカスタム イベントをトリガーします。

1. 子コンポーネントでイベント コンテンツを定義します

{{item}}

2. v-on でカスタム イベントを受信する v-on:receive="changeValue"

3. 子コンポーネント イベントをトリガーすると、 $emit は親コンポーネントに this.$emit("receive",item);

4 を通知します。親コンポーネントは、カスタム イベントに従って対応するフィードバックを提供します。changeValue:function(value){this.val = value;}

次のケースを見てください。input をクリックすると、ドロップダウン リスト ボックスが表示され、対応するリストを選択します。リストの内容が入力ボックスに表示されます。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

Django と Vue 構文間の競合を解決する方法

nodejs で Web サイトの画像をクロールする方法

ES6/JavaScript の使用スキルについて (詳細なチュートリアル)

動的に実行する方法WeChat アプレットを使用してプレースホルダー プロンプト テキストを設定します

以上がVue2.0でコンポーネントと親子コンポーネント通信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。