Vue.jsでコンポーネント親子間の値の受け渡し

親から子にデータ渡す

親の方では子のコンポーネントを読み込みテンプレートで配置するだけです。
後で子コンポーネントで設定する「message」に値を入れます。

parent.vue

<template>
	<div>
		<child message="Hello Vue!!"></child>
	</div>
</template>
<script>
import Child from './child.vue';
export default {
	components: {
		Child
	}
}
</script>

子コンポーネントではpropsに「message」を設定します。
後はテンプレートに表示させるだけですね。

child.vue

<template>
	<div>
		<p>{{ message }}</p>
	</div>
</template>
<script>
export default {
	props: ['message']
}
</script>

親から子に変数を渡す

文字列ではなく変数を渡してみます。
親である「parent.vue」を下記のようにします。

parent.vue

<template>
	<div>
		<child :message="message"></child>
	</div>
</template>
<script>
import Child from './child.vue';
export default {
	components: {
		Child
	},
	data() {
		return {
			message: 'Hello Vue!!'
		}
	}
}
</script>

dataに変数を設定したら、テンプレートで「message=」としてたところを「:message=」にして設定した変数を指定します。

子から親の変数を書き換える

先程の parent.vue のmessageを child.vue から書き換えてみます。

child.vue

<script>
export default {
	created: function () {
		this.$parent.message = 'child!!!';
	}
}
</script>

this.$parent で親にアクセスできます。

子から親のメソッドを実行する

親コンポーネントのmessageLogというメソッドを子に実行させたいとします。
テンプレートは「v-on:」に続く「panretMessage」を子コンポーネントで実行することで、messageLogが呼び出されます。

parent.vue

<template>
	<div>
		<child v-on:panretMessage="messageLog"></child>
	</div>
</template>
<script>
import Child from './child.vue';
export default {
	components: {
		Child
	},
	methods: {
		messageLog() {
			console.log("parent");
		}
	}
}
</script>

子コンポーネントのテンプレートで「$emit」に親で設定した「panretMessage」を指定することで実行されます。

child.vue

<template>
<div>
<button @click="$emit('panretMessage')">message</button>
</div>
</template>

メソッドに引数を渡す

親コンポーネントのメソッドを実行するときに引数を渡したいこともありそうです。

parent.vue

export default {
	components: {
		Child
	},
	methods: {
		messageLog(message) {
			console.log(message);
		}
	}
}

子コンポーネントの$emitの第２引数に普通に入れるだけでした。

child.vue

<template>
<div>
<button @click="$emit('panretMessage', '親に送るメッセージ')">message</button>
</div>
</template>