Vue2.0でコンポーネントと親子コンポーネント通信を実装する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-21 13:56:48

オリジナル

1615 人が閲覧しました

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

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

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

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

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

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

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

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

グローバル登録

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

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

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

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

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

<p id="app">
    <h2>自定义下拉框</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>自定义下拉框</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>自定义下拉框</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

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

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