vue2和vue3的传值

Vue2和Vue3的传值方式有所不同，具体如下：

Vue2的传值方式：
1. 父组件向子组件传值：使用props进行传值。
2. 子组件向父组件传值：使用$emit触发父组件的自定义事件。
3. 非父子组件之间的传值：使用一个空的Vue实例作为中央事件总线，通过$emit和$on进行传值。

Vue3的传值方式：
1. 父组件向子组件传值：仍然使用props进行传值，但是可以使用v-bind缩写语法。
2. 子组件向父组件传值：使用emits选项声明子组件可以触发的事件，然后使用$emit触发事件。
3. 非父子组件之间的传值：使用provide和inject进行传值，provide可以在父组件中提供数据，inject可以在子组件中注入数据。

下面是一个Vue3组件通信的例子：

<template>
  <div>
    <child :message="message" @update="handleUpdate"></child>
    <p>父组件收到子组件的消息：{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const message = ref('Hello, child!')
    const handleUpdate = (newMessage) => {
      message.value = newMessage
    }
    return {
      message,
      handleUpdate
    }
  }
}
</script>

<template>
  <div>
    <p>子组件收到父组件的消息：{{ message }}</p>
    <button @click="handleClick">向父组件发送消息</button>
  </div>
</template>

<script>
import { defineEmits, defineProps } from 'vue'

export default {
  props: {
    message: String
  },
  emits: ['update'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('update', 'Hello, parent!')
    }
    return {
      handleClick
    }
  }
}
</script>