Vueコンポーネント化対応知識点の開発

Vueコンポーネント化対応知識点の開発
1.コンポーネント登録
1.1グローバル登録
Vueを通ります.component('コンポーネント名',{})メソッドを登録します.グローバルに登録されたコンポーネントは、どのインスタンスでも使用できます.基本インスタンスコードは次のとおりです.

  <div id="app">
    <button-counter></button-counter>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('button-counter', {
     
      // data              ，        
      data: function(){
     
        return {
     
          count: 0
        }
      },
      //                ，          （``）   
      template: '   {
     {count}} ',
      methods: {
     
        handle: function(){
     
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        
      }
    });
  </script>

1.2ローカル登録
ローカルに登録されているコンポーネントは、現在のインスタンスでのみ使用できます.基本インスタンスコードは次のとおりです.

  <div id="app">
    <test-com></test-com>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('test-com',{
     
      //     helloworld，  hello-world    vm    
      template: '
Test
'
    });
    var HelloWorld = {
     
      data: function(){
     
        return {
     
          msg: 'HelloWorld'
        }
      },
      template: '
{
     {msg}}
'
    };
   
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        
      },
      //       
      components: {
     
        'hello-world': HelloWorld,
      }
    });

2.Vueコンポーネント間の値伝達
2.1親コンポーネントから子コンポーネントへの値の伝達
親コンポーネントは、テンプレートに対応するデータをサブコンポーネントにバインドすることによって、サブコンポーネントでpropsを使用して親コンポーネントから渡された値を受信します.htmlのコンポーネントを直接埋め込み、propsでアルパカの形式を使用すると、データをバインドするときに短い横線形式でバインドする必要がありますが、文字列を使用すると、このタイプの制限を考慮する必要はありません.

  <div id="app">
    <div>{
     {
     pmsg}}</div>
    <menu-item :menu-title='ptitle'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
               -props     
    */
    Vue.component('third-com', {
     
      props: ['testTile'],
      template: '
{
     {testTile}}
'
    });
    Vue.component('menu-item', {
     
      props: ['menuTitle'],
      template: '
{
     {menuTitle}}
'
    });
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        pmsg: '      ',
        ptitle: '      '
      }
    });
  </script>

2.2サブアセンブリから親アセンブリへの値の伝達
サブコンポーネントでは$emit()でイベントがトリガーされ、$emit()の最初のパラメータはカスタムイベント名であり、2番目のパラメータは伝達する必要があるデータであり、親コンポーネントではv-onを使用してサブコンポーネントのイベントをリスニングする必要があり、イベント名はサブコンポーネントでカスタマイズされたイベント名と一致する.

  <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{
     {
     pmsg}}</div>
    <menu-item @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
               -    
    */
    
    Vue.component('menu-item', {
     
      props: ['parr'],
      template: `
        

                    
        
      `
    });
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        pmsg: '      ',
        fontSize: 10
      },
      methods: {
     
        // val $emit()        （     、  ）
        handle: function(val){
     
          //       
          this.fontSize += val;
        }
      }
    });
  </script>

2.3兄弟コンポーネント間の値伝達
兄弟間でデータを転送するには、イベントセンター(イベントセンターvar hub=new Vue()を提供する)を介してデータを転送する必要があります.データを渡す側は、イベントによってhubをトリガーする.e m i t(メソッド名、伝達データ)は、受信データ側が、m o u n t e d()フック関数においてh u bをトリガする.Emit(メソッド名、伝達データ)、受信データ側は、mounted(){}フック関数でhubをトリガする.Emit(メソッド名、伝達データ)、受信データ側は、mounted()フック関数でhubをトリガする.on()メソッド名;データ転送が終了するとhub.$を介してイベントを破棄できます.off()メソッド名が破棄された後、データの転送ができません.

  <div id="app">
    <div>   </div>
    <div>
      <button @click='handle'>    </button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
                
    */
    //       
    var hub = new Vue();

    Vue.component('test-tom', {
     
      data: function(){
     
        return {
     
          num: 0
        }
      },
      template: `
        

          
TOM:{
      {num}}
          

              
          
        
      `,
      methods: {
     
        handle: function(){
     
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
     
        //     
        hub.$on('tom-event', (val) => {
     
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
     
      data: function(){
     
        return {
     
          num: 0
        }
      },
      template: `
        

          
JERRY:{
      {num}}
          

              
          
        
      `,
      methods: {
     
        handle: function(){
     
          //          
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
     
        //     
        hub.$on('jerry-event', (val) => {
     
          this.num += val;
        });
      }
    });
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        
      },
      methods: {
     
        handle: function(){
     
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

3.コンポーネントスロット
コンポーネントの最大の特性は多重化であり、スロットをうまく使うことでコンポーネントの多重化能力を大幅に向上させることができます.子コンポーネントにデフォルトを設定し、親コンポーネントが子コンポーネントにコンテンツを渡さない場合にデフォルトを表示します.
3.1匿名スロット
子コンポーネントにデフォルトを設定し、親コンポーネントが子コンポーネントにコンテンツを渡さない場合にデフォルトを表示します.

  <div id="app">
    <alert-box> bug  </alert-box>
    <alert-box>     </alert-box>
    <alert-box></alert-box>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
          ：           
    */
    Vue.component('alert-box', {
     
      template: `
        

          ERROR:
              
        
      `
    });
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        
      }
    });
  </script>

3.2ユニット名スロット
slotラベルでnameを使用して対応する要素をバインドします.一方、templateラベルを使用すると、複数の情報を統合してスロットに渡すことができます.

  <div id="app">
    <base-layout>
      <p slot='header'>    </p>
      <p>    1</p>
      <p>    2</p>
      <p slot='footer'>      </p>
    </base-layout>

    <base-layout>
      <template slot='header'>
        <p>    1</p>
        <p>    2</p>
      </template>
      <p>    1</p>
      <p>    2</p>
      <template slot='footer'>
        <p>      1</p>
        <p>      2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
          
    */
    Vue.component('base-layout', {
     
      template: `
        

          

            
          
          

            
          
          
        
      `
    });
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        
      }
    });
  </script>

3.3役割ドメインスロット
役割ドメインスロットは、親コンポーネントでサブコンポーネントを加工処理できます.サブコンポーネントのslotを多重化したり、slotの内容を一致させたりすることができます.具体的には、サブコンポーネントにスロットを定義し、プロパティバインドで親コンポーネントにデータを渡します.親コンポーネントではtemplateラベルとslot-scopeプロパティを使用してサブコンポーネントのデータを取得する必要があります.サブコンポーネントでバインドされている場合:infoプロパティ、親コンポーネントでslot-scope='father'受信を使用します.親コンポーネントがデータを処理する必要がある場合はfather.infoはデータを取得して対応する操作を行います.

  <div id="app">
    <fruit-list :list='list'>
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">{
     {
     slotProps.info.name}}</strong>
        <span v-else>{
     {
     slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
           
    */
    Vue.component('fruit-list', {
     
      props: ['list'],
      template: `
        

          

            {
      {item.name}}
          
        
      `
    });
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        list: [{
     
          id: 1,
          name: 'apple'
        },{
     
          id: 2,
          name: 'orange'
        },{
     
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>