Vueコンポーネントの定義
コンポーネントとは何か:コンポーネントの出現は、Vueインスタンスのコード量を分割するためであり、異なるコンポーネントで異なる機能モジュールを区分することができ、将来どのような機能が必要なのか、対応するコンポーネントを呼び出すことができる.コンポーネント化とモジュール化の違い:
モジュール化:コードロジックの観点から区分される.コードの階層開発を便利にし、各機能モジュールの職能が単一であることを保証する.
コンポーネント化:UIインタフェースの観点から区分されます.フロントエンドのコンポーネント化は、UIコンポーネントの再利用を容易にする.
-グローバルコンポーネント定義の3つの方法
Vueを使用します.extend配合Vue.componentメソッド:

var login = Vue.extend({
      template: '
  
'
    });
    Vue.component('login', login);

Vueを直接使用する.componentメソッド:

Vue.component('register', {
      template: '
  
'
});

テンプレート文字列をscriptラベル種に定義する:

      <div><a href="#">  </a> | <a href="#">  </a></div>

また、Vueを使用する必要がある.コンポーネントを定義するには、次の手順に従います.

Vue.component('account', {
      template: '#tmpl'
});

注意:コンポーネント内のDOM構造は、唯一のルート要素(Root Element)でしか包まれません.
 
 
-コンポーネントにデータとレスポンス・イベントを表示します(カウンタ・ケース・デモンストレーション).
構成要素において、dataは、方法として定義する必要があり、例えば、.

Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '   ！'
        }
      },
      methods:{
        login(){
          alert('       ');
        }
      }
});　

サブコンポーネントで、テンプレート文字列をscriptラベルに定義する場合、サブコンポーネントのdata属性の値にアクセスするには、thisを使用してアクセスする必要があります.
 
 
-componentsプロパティを使用してローカルサブアセンブリを定義します.
コンポーネントインスタンス定義方法:

    <span style="color:#008000;">//</span><span style="color:#008000;">    Vue   ，   ViewModel</span>
    <span style="color:#0000ff;">var</span> vm = <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
      el: </span>'#app'<span style="color:#000000;">,
      data: {},
      methods: {},
      components: { </span><span style="color:#008000;">//</span><span style="color:#008000;">      </span>
        account: { <span style="color:#008000;">//</span><span style="color:#008000;"> account   </span>
          template: '<div><h1>  Account  {{name}}</h1><login></login></div>', <span style="color:#008000;">//</span><span style="color:#008000;">            </span>
          components: { <span style="color:#008000;">//</span><span style="color:#008000;">          </span>
            login: { <span style="color:#008000;">//</span><span style="color:#008000;"> login   </span>
              template: "<h3>      </h3>"<span style="color:#000000;">
            }
          }
        }
      }
    });
</span>

参照コンポーネント:

<div id="app">
    <account>account>
div>

　　
  flag識別子を使用して、v-ifとv-elseを組み合わせてコンポーネントを切り替えます.
ページ構造:

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <my-com1 v-if="flag">my-com1>
    <my-com2 v-else="flag">my-com2>
div>

Vueインスタンス定義:

<span style="color:#000000;">
    Vue.component(</span>'myCom1'<span style="color:#000000;">, {
      template: </span>'<h3>   </h3>'<span style="color:#000000;">
    })

    Vue.component(</span>'myCom2'<span style="color:#000000;">, {
      template: </span>'<h3>   </h3>'<span style="color:#000000;">
    })

    </span><span style="color:#008000;">//</span><span style="color:#008000;">    Vue   ，   ViewModel</span>
    <span style="color:#0000ff;">var</span> vm = <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
      el: </span>'#app'<span style="color:#000000;">,
      data: {
        flag: </span><span style="color:#0000ff;">true</span><span style="color:#000000;">
      },
      methods: {}
    });
</span>

 
  :isプロパティを使用して、異なるサブコンポーネントを切り替え、切り替えアニメーションを追加します.
コンポーネントインスタンス定義方法:

  //     
    const login = Vue.extend({
      template: `

        
    
      
`
    });
    Vue.component('login', login);

    //     
    const register = Vue.extend({
      template: `

        
    
      
`
    });
    Vue.component('register', register);

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });

componentのラベルを使用してコンポーネントを参照し、:isのプロパティを使用してロードするコンポーネントを指定します.

 <div id="app">
    <a href="#" @click.prevent="comName='login'">  a>
    <a href="#" @click.prevent="comName='register'">  a>
    <hr>
    <transition mode="out-in">
      <component :is="comName">component>
    transition>
  div>

切り替えスタイルの追加:

 
 
 
親コンポーネントが子コンポーネントに値を渡す
コンポーネントインスタンスの定義方法は、親コンポーネントから渡されるデータを定義するためにpropsのプロパティを使用する必要があります.

    <span style="color:#008000;">//</span><span style="color:#008000;">    Vue   ，   ViewModel</span>
    <span style="color:#0000ff;">var</span> vm = <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
      el: </span>'#app'<span style="color:#000000;">,
      data: {
        msg: </span>'         '<span style="color:#000000;">
      },
      components: {
        son: {
          template: </span>'<h1>      --- {{finfo}}</h1>'<span style="color:#000000;">,
          props: [</span>'finfo'<span style="color:#000000;">]
        }
      }
    });
</span>

v-bindまたは簡略化命令を使用して、データをサブアセンブリに渡す:

<div id="app">
    <son :finfo="msg">son>
div>

 
 
子コンポーネントから親コンポーネントへの値の転送
原理:親コンポーネントはメソッドの参照を、子コンポーネントの内部に渡し、子コンポーネントは内部で親コンポーネントから渡されたメソッドを呼び出し、同時に親コンポーネントに送信するデータを、メソッドを呼び出すときにパラメータとして渡す.
親コンポーネントは、メソッドの参照を子コンポーネントに渡す.ここで、getMsgは、親コンポーネントのmethodsで定義するメソッド名であり、funcは、子コンポーネント呼び出しがメソッドに渡すときのメソッド名である.

<son @func="getMsg">son>

サブアセンブリ内部は、this.$emit(' ', )によって親アセンブリのメソッドを呼び出すとともに、を使用して親アセンブリにデータを渡す.

    
    

    
    
      <div>
        <input type="button" value="      " @click="sendMsg" />
      </div>
    
  

  
    <span style="color:#008000;">//</span><span style="color:#008000;">         </span>
    Vue.component('son'<span style="color:#000000;">, {
      template: </span>'#son', <span style="color:#008000;">//</span><span style="color:#008000;">     Id</span>
<span style="color:#000000;">      methods: {
        sendMsg() { </span><span style="color:#008000;">//</span><span style="color:#008000;">        </span>
          <span style="color:#0000ff;">this</span>.$emit('func', 'OK'); <span style="color:#008000;">//</span><span style="color:#008000;">             ，         </span>
<span style="color:#000000;">        }
      }
    });

    </span><span style="color:#008000;">//</span><span style="color:#008000;">    Vue   ，   ViewModel</span>
    <span style="color:#0000ff;">var</span> vm = <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
      el: </span>'#app'<span style="color:#000000;">,
      data: {},
      methods: {
        getMsg(val){ </span><span style="color:#008000;">//</span><span style="color:#008000;">     ，   this.$emit()        ，      </span>
<span style="color:#000000;">          alert(val);
        }
      }
    });
  </span>

 
転載先:https://www.cnblogs.com/CGWTQ/p/11250309.html