[Vue] コンポーネント 子から親へ「$emit」で値を渡す

Vueのコンポーネントで、子コンポーネントから親コンポーネントに「$emit」で値を渡すサンプルです。

子から親へ「$emit」で値を渡す

値を渡す

this.$emit( '任意のイベント名', 渡すデータ );

イベントの発火のみ

this.$emit( '任意のイベント名' );

コード

template

<template>
<div id="app">
	<!-- Parent -->
	<input 
        type="text" 
        v-model="inputText"
        placeholder="入力してください。"
    >
    <!-- <p>入力した値 : {{ inputText }}</p> -->

    <!-- Childから受け取った値 -->
    <p v-if="fromChildData">
        Childから受け取った値 : {{ fromChildData }}
    </p>

    <!-- Component : Child -->
    <!-- @child-eventは、子コンポーネントで設定した任意のイベント名 -->
    <child-item 
        :content="inputText"
        @child-event="childUpdate"
    ></child-item>
</div>
</template>

script

<script>
var childItem = Vue.component( 'child-item', {
    props: {
        content: {
            type: String,
            default: "デフォルト"
        }
    },
    data() {
        return {
            childText: 'ボタンをクリック : '
        };
    },
    template: `
        <div class="child">
            <button 
                type="button"
                @click="click"
            >
                {{ childText + content }}
            </button>
        </div>
    `,
    methods: {
        click() {
            this.$emit( 'child-event', this.childText + this.content );
        }
    }
});

export default {
    components: {
        childItem
    },
    data() {
        return {
            inputText: '',
            fromChildData: null
        };
    },
    methods: {
        childUpdate( value ) {
            this.fromChildData = value;
        }
    }
};
</script>

「$emit」で複数の値を渡す

複数の値を渡したいときは、オブジェクトにして渡すといいようです。

複数の値を渡す

this.$emit( '任意のイベント名', {
	key1: value1,
	key2: value2
} );

コード

template

<template>
<div id="app">
	<!-- Parent -->
	<input 
        type="text" 
        v-model="inputText"
        placeholder="入力してください。"
    >
    <!-- <p>入力した値 : {{ inputText }}</p> -->

    <!-- Childから受け取った値 -->
    <p v-if="fromChildData">
        Childから受け取った値 : {{ fromChildData }}
    </p>

    <!-- Component : Child -->
    <!-- @child-eventは、子コンポーネントで設定した任意のイベント名 -->
    <child-item 
        :content="inputText"
        @child-event="childUpdate"
    ></child-item>
</div>
</template>

script

<script>
var childItem = Vue.component( 'child-item', {
    props: {
        content: {
            type: String,
            default: "デフォルト"
        }
    },
    data() {
        return {
            childText: 'ボタンをクリック : '
        };
    },
    template: `
        <div class="child">
            <button 
                type="button"
                @click="click"
            >
                {{ childText + content }}
            </button>
        </div>
    `,
    methods: {
        click() {
        	// 複数の値を渡すときは、オブジェクトに
            this.$emit( 'child-event', {
                item1: this.childText,
                item2: this.content,
                item3: 'おまけ'
            } );
        }
    }
});

export default {
    components: {
        childItem
    },
    data() {
        return {
            inputText: '',
            fromChildData: null
        };
    },
    methods: {
        childUpdate( value ) {
            this.fromChildData = value;
        }
    }
};
</script>

メモ