Vue.jsのemitで複数のデータを送受信する方法

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

複数データを送る:子 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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です