Vue.jsとは
Vue.jsを勉強し始めた
親子コンポーネント間のデータ受け渡し


App.vue(親)
<template>
<div class="top">
<first-child :hoge="title"></first-child>
<second-child @input-text="addText"></second-child>
<third-child :fuga="textList"></third-child>
</div>
</template>
<script>
import FirstChild from './components/FirstChild.vue';
import SecondChild from './components/SecondChild.vue';
import ThirdChild from './components/ThirdChild.vue';
export default {
components: {
FirstChild,SecondChild,ThirdChild
},
data() {
return {
title: 'ボタンを押してテキストを一覧に追加',
textList: [],
}
},
methods: {
addText(value) {
const newText = {
id: new Date().toISOString(),
text: value,
};
this.textList.unshift(newText);
}
}
}
</script>
FirstChild.vue(子)
<template>
<p>{{ hoge }}</p>
</template>
<script>
export default {
props: ['hoge'],
};
</script>
SecondChild.vue(子)
<template>
<form @submit.prevent="addText">
<div>
<label for="test">テキストを入力</label>
<input type="text" name="test" id="test" v-model="inputText"/>
</div>
<button @click="addInputText">一覧にテキスト追加</button>
</form>
</template>
<script>
export default {
data() {
return {
inputText: null,
}
},
methods: {
addInputText() {
this.$emit('input-text',this.inputText);
this.inputText = '';
}
}
};
</script>
ThirdChild.vue(子)
<template>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</template>
<script>
export default {
props: ['fuga'],
data() {
return {
list: this.fuga,
}
}
};
</script>