Vue.js-同一素子レベル間の通信


親構成部品の使用


:eventを使用して親コンポーネントにアップグレードし、propsを使用して親コンポーネントから同じコンポーネントレベルにダウングレードし、通信します.

    <div id="app">
        <app-header v-bind:propsdata="num"></app-header>
        <app-content v-on:pass="deliverNum"></app-content>
    </div>

    
    <script>
        var appHeader = {
            template: '<div>header</div>',
            props: ['propsdata']
        }
        var appContent = {
            template: '<div>content<button v-on:click="passNum">pass</button></div>',
            methods: {
                passNum: function() {
                    this.$emit('pass', 10);
                }
            }
        }
        new Vue({
            el:'#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            },
            data: {
                num: 0
            },
            methods: {
                deliverNum : function(value) {
                    this.num = value;
                }
            }
        });
    </script>

  • passボタンをクリックすると、passNumメソッドが実行されます(event emitを使用します)
         →  数値「10」をサブアセンブリから親アセンブリに上げます.

  • 数値「10」はdeliverNumを介して親素子numに割り当てられる

  • propsを使用して、親コンポーネントnumの数値をappHeaderに割り当てます.