vue3中使用setup组件通信的变化

在Vue 3中，使用setup函数来定义组件，并且使用ref和reactive函数来创建响应式数据。

通信方式的变化如下：

Props: 在Vue 3中，可以使用props选项来声明组件的属性，并且可以使用toRefs函数将属性转换为响应式数据。例如：

// ChildComponent.vue
export default {
  props: ['message'],
  setup(props) {
    const { message } = toRefs(props);
    return { message };
  }
}

Emit: 在Vue 3中，可以使用emits选项来声明组件的自定义事件，并且可以使用$emit函数来触发事件。例如：

// ChildComponent.vue
export default {
  emits: ['update:message'],
  setup(props, { emit }) {
    const setMessage = (newMessage) => {
      emit('update:message', newMessage);
    };
    return { setMessage };
  }
}

Provide/Inject: 在Vue 3中，可以使用provide函数在父组件中提供数据，然后使用inject函数在子组件中注入数据。例如：

// ParentComponent.vue
import { provide } from 'vue';

export default {
  setup() {
    const message = ref('Hello');
    provide('message', message);
  }
}

// ChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

总的来说，Vue 3中使用setup函数来定义组件，并且使用ref和reactive函数创建响应式数据。在通信方面，可以使用props来声明属性，使用emits来声明自定义事件，以及使用provide和inject来传递数据