vue3+ts组件之间通信

1.props+emits（父传子，子传父）

优点：简单，易理解，使用最多

缺点：仅限于父传子，子传父

介绍：

   简单来说，组件通过props传递数据是vue最简单的方式，组件传，组件收，通常在vue的语法中，：v-bind是大多数实现的途径。

1.通过父传子：

//父组件





//子组件

2.通过emits子传父：

在子组件定义并暴露一个方法，然后传递给父组件。这种emits传递的方法类似于react中通过函数子传递给父数据，通过emit定义一个方法，子组件在调用这个方法时，同时触发父组件中的改方法，其父组件的参数为子组件中emit第二个参数。

//父组件






//子组件

3.借鉴react，通过函数调用传值

父组件通过props传递给子组件数据时，同时可以传递函数，我们在子组件调用这个方法，使用调用者自身的参数，达到子组件修改父组件内容的目的。

//父组件





//子组件 hello world




//子组件 hello china

2.Provide+Inject(提供+注入）

优点：一个祖先可多级传递给后代

缺点：仅限于祖先传给后代，同级不可穿，子不可传父

使用Provide+Inject时，可以更加方便的从后代中获取祖先的数据，并且中间组件不需要即可不用获取，如果一个项目中多个组件需要同一个数据，我们可以直接把Provide存在app.vue上面供所有的后代使用，如果是稍微庞大的项目，则需要自定义一个key的方法，确保项目中每一个key独一无二。

  



  





  






  
export const myKey = Symbol();

export const myMessage = Symbol();

3. slot  (插槽)

优点：简单，易理解，使用最多

缺点：仅限于父传子，子传父

插槽的使用意义上来讲并不算是组件间数据化传递，而是在子组件中的某一个特定的位置，放置需要的东西，可以是页面或是组件。

//父组件





//子组件

总结：无论是vue或者react，要解决组件之间传递数据的方法有很多，我们需要找到一种最轻量最合适的解决方法，来帮助我们完成业务上的难题。

下一章更新vue中的状态管理。。。