タグ: Vue

メモ書きになってしまいます。

複数データを送る：子 Componet の<script>

<script>
export default {
  data() {
    return {
      email: "",
      password: "",      
    };
  },  
  methods: {
    onSubmit() {      
      this.$emit('formSubmit', 
                  {
              email: this.email,
              password: this.password,
            });
    },
    onInputEmail(e) {
      this.email = e.target.value;
    },
    onInputPassword(e) {
      this.password = e.target.value;
    },
  },
</script>

複数データ受け取る：親

<template>
//省略
      <SimpleForm @formSubmit="onSubmit"/>
//省略
</template>


<script>
import SimpleForm from "./components/SimpleForm.vue"

export default {
  name: 'App',
  components: {
    SimpleForm,
  },
  methods: {
    onSubmit({email, password}) {

      console.log(email)
      console.log(password)

//dataでemail, passwordを作る必要なし.
      this.msg = "//email:" + email + "//password:" + password;
    }
  },
  data() {
    return {
      msg: 'Emai/Passwordを反映',
    }
  },
}
</script>

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>