前提：当提供 / 注入响应式的数据时，建议尽可能将任何对响应式状态的变更都保持在供给方组件中。这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其更容易维护。
上面这句话是Vue3官方语言，这告诫我们操作响应式数据尽量在供给方组件（父组件）中，但在很多情况下我们需要在子组件操作数据。
props传值就不墨迹了，大家都会！
最近学react，发现react中可以由父组件=>子组件通过props传递一个函数，子组件可以通过这个函数来改变父组件中的数据，这个我在vue中没遇到过，因此突发奇想的把组件间通信方式总结下，持续更新ing...
如下，有两个组件，父组件和子组件，父组件中有个数据count，子组件接收到父组件的数据，并点击按钮改变父组件的数据，你会想到哪几种方法呢？
//父组件
<template>
<h1>我是父组件{
{ count }}</h1>
<son :addCount="addCount" @addCountEmit="addCountEmit"></son>
</template>
<script setup lang="ts">
import { provide, ref } from "vue";
import son from "./son/index.vue";
const count = ref(0);
//1.该方法通过props传递给子组件并调用
const addCount = () => {
count.value++;
};
//2.传统的emit自定义事件，so easy
const addCountEmit = () => {
count.value++;
};
//3.provide和reject方法，和props基本一样
provide("addCount", {
addCount,
});
</script>//子组件
<template>
<button @click="add">我是子组件的按钮</button>
</template>
<script setup lang="ts">
import { inject,defineProps } from "vue";
const { addCount } = inject('addCount') as { addCount: () => void };//防止报错
const props = defineProps<{ addCount: Function }>();
const emit = defineEmits(["addCountEmit"]);
const add = () => {
props.addCount();//调用父组件props过来的方法
emit("addCountEmit");//自定义事件
addCount()//provide和inject方法
};
</script>
