Vue中组件通信：子传父emit

Vue2中：

$emit

子组件绑定自定义事件，触发执行后，传给父组件，父组件需要用事件监听来接收参数

父组件：

<template>
  <div id="app">
    <TodoItem @getMsg="showMsg"></TodoItem>
    {{ title }}
  </div>
</template>

<script>
import TodoItem from './components/so.vue'

export default {
  name: 'App',
  components: {
    TodoItem
  },
  methods: {
    showMsg(title) {
      this.title = title
    }
  },
  data() {
    return {
      title: ''
    }
  },
}
</script>

<style>
#app {
  margin: 20px auto 20px 20px;
}
</style>

子组件：

<template>
    <div class="so">
        <p>子组件</p>
    </div>
</template>

<script>
export default {
    name: "todo-item",
    mounted() {
        this.$emit('getMsg', '我从子组件过来的')
    }
}
</script>

<style scoped>

</style>

 Vue3中：

vue3中无法直接使用$emits，需要使用const emit = defineEmits(['(对应方法名)'])的方式来向父组件传递信息，一般在onMounted(() => {})中去执行传递方法的事件，如：emit("getMsg", "我来自子组件")，然后父组件在子组件上使用@getMsg="showMsg"的方式来获取传入的信息，注意：getMsg是对应的子组件的方法名，此方法名称自定义，showMsg为父组件的方法名称也可以自定义

父组件：

<template>
  <TodoItem @getMsg="showMsg"></TodoItem>
  {{ title }}
</template>

<script>
import TodoItem from './components/so'
import { ref } from 'vue'

export default {
  name: 'App',
  components: {
    TodoItem
  }
}
</script>

<script setup>
  const title = ref("")
  const showMsg = (innerTitle) => {
    title.value = innerTitle
  }
</script>

<style>
#app {
  margin: 20px auto 20px 20px;
}
</style>

子组件：

<template>

  <div class="so">
    <p>子组件</p>
  </div>

</template>

<script>
import { onMounted, defineEmits } from 'vue'
export default {
    name: "todo-item",
}
</script>

<script setup>
  const emit = defineEmits(['getMsg'])
  onMounted(() => {
    emit("getMsg", "我来自子组件")
  })
</script>
<style scoped>

</style>