Vue.jsを触り初めて2日目です。 結構苦戦しています。
データのやり取りがイメージが曖昧なことが影響しているかと思います。
formデータを 子 Component → 親Component 渡す方法を紹介します。
ただし、記述方法としては、ベストなものではないです。 それでも、無理矢理にでもデータを受け渡すことで、Vue.jsの肌触り感に慣れていける方が重要かなと思っています。
①： emitの理解
②：子のComponet<Input>データを親に渡す
最初のSTEPとして、Componet<Input>データを親に渡してみます。
App.vue
<template>
<div id="app">
<!-- Componetの呼び出し && parentMethodでComponentのemitからのデータを受け取る -->
<InputData class="input-data" @input-data="parentMethod"/>
<!-- Inputで入力されたデータがリアルタイムで反映 -->
<div>
{{ this.input_data_single }}
</div>
</div>
</template>
<script>
import InputData from "./components/InputData.vue"
export default {
name: 'App',
components: {
InputData,
},
methods: {
parentMethod(e){
console.log(e);
this.input_data_single = e;
},
},
data() {
return {
input_data_single: '',
}
},
}
</script>
<style>
/* 省略 */
</style>
InputData.vue ( 子 Componet )
<template>
<div>
<input type="text" :value="value" @input="childMethod">
</div>
</template>
<script>
export default {
methods: {
childMethod(e) {
console.log(e.target.value);
this.$emit('input-data', e.target.value);
},
},
data() {
return {
value: "",
};
},
};
</script>
<style>
/* 省略 */
</style>