Vueの親子コンポーネント間の伝達値

8750 ワード

vueではコンポーネントをよく使います.親子コンポーネント間の伝達値はどのように伝達されますか.
1、親コンポーネントから子コンポーネントへの値の伝達
サブコンポーネントに値を入力し、v-bindでバインドできます.

 <menu-item :title='ptitle' content='hello'></menu-item>

サブコンポーネントはpropsオプションで予想されるデータを明示的に宣言します.

Vue.component('menu-item', {
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '        '
        }
      },
      template: '{{msg + "----" + title + "-----" + content}}
'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '      ',
        ptitle: '      '
      }
    });

2、サブアセンブリから親アセンブリへの値の転送vueサブアセンブリでは親アセンブリの内容を変更できないため、サブアセンブリがイベントをトリガーすることで親アセンブリに値を転送できます.サブコンポーネント:$emit()メソッドによるイベントブロードキャスト親コンポーネントのパブリッシュ:サブコンポーネントが外部にトリガーされたイベントをキャプチャし、対応するメソッドを実行します.

<body>
  <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
               -    
      props      ：     
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        
          
            {{item}}
          
          
        
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '      ',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(){
          //       
          this.fontSize += 5;
        }
      }
    });
  </script>
</body>

親子コンポーネントの関係はpropが下に伝達され、イベントが上に伝達されるようにまとめることができる.親コンポーネントはpropを介してサブコンポーネントにデータを送信し、サブコンポーネントはイベントを介して親コンポーネントにメッセージを送信します.

2020先端知識点まとめ(五)-vue

Visual Studio CodeでSalesforceの開発環境構築