emitの基本

子→親へデータを渡す場合、emitを使用する

emitの書き方

this.$emit("親で実行する関数名", "引数1","引数2","引数3");

引数は何個でも取れる

App.vue

<template>
  <div>
    <child @parent="test" />
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  components: {
    Child,
  },
  methods: {
    test(arg) {
      console.log("test", arg);
    },
  },
};
</script>

//コンソール
test 
テストメッセージ

Child.vue

<template>
  <div>
    <button @click="click">親にメッセージを渡す</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newMessage: "テストメッセージ",
    };
  },
  methods: {
    click() {
      this.$emit("parent", newMessage);
    },
  },
};
</script>

これでOK

親をこう書き換えても同じ動作をする

App.vue

<child @parent="test" />

App.vue

<child @parent="test($event)" />

プロパティに直接代入することも可能である

App.vue

<template>
  <div>
    {{ message }}
    <child @parent="message = $event" />
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  components: {
    Child,
  },

  data() {
    return {
      message: "",
    };
  },
};
</script>

要するに

<child @parent="ここ！！！" />

ここ！！！にはjavaScriptが書けるのである

親側で条件分岐する

子からのイベントで親の関数を条件付きで実行したい場合

↓だと関数が実行されない

App.vue

<template>
  <div>
    <child @parent="flag ? test1 : test2" />
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  components: {
    Child,
  },
  computed: {
    flag() {
      return false;
    },
  },
  methods: {
    test1(arg) {
      console.log("true",arg);
    },
    test2(arg) {
      console.log("false",arg);
    },
  },
};
</script>

↓で正しく実行される

App.vue

<template>
  <div>
    <child @parent="flag ? test1($event) : test2($event)" />
  </div>
</template>

<script>
  //上と同じため省略
</script>

//コンソール
false 
テストメッセージ

おそらく、

@parent

が実行されたときに

<child @parent="flag ? test1 : test2" />

true,falseの判定だけ実行し、実際の関数は実行されないのであろう

<child @parent="flag ? test1($event) : test2($event)" />

なので関数を実行する()が必要である

<child @parent="test1" />

関数のみの場合、関数を実行してくれる

emitの第二引数

しかしこの書き方だと、emitに第二引数があった場合、どうするのだろうか？

<child @parent="flag ? test1($event) : test2($event)" />

私は第二引数を使わずに引数が２つあったらオブジェクトにして渡していたが、
もっといいやり方があるのかもしれない

vue3だと何か変化があったりするのかもしれない

---環境---
mac
vue2.6.11
node 最新LTS