组件间的通信

1.1props

let props = defineProps({
  info:{
   type:String,//接受的数据类型
   default:'默认参数',//接受默认数据
  },
  money:{
   type:Number,
   default:0
}})

let props = defineProps(["info",'money']);

1.2自定义事件

<template>
  <div>
    <h1>我是子组件2</h1>
    <button @click="handler">点击我触发xxx自定义事件</button>
  </div>
</template>

<script setup lang="ts">
let $emit = defineEmits(["xxx"]);
const handler = () => {
  $emit("xxx", "法拉利", "茅台");
};
</script>
<style scoped>
</style>

1.3全局事件总线

但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this，

那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能

可以使用插件mitt实现。

mitt:官网地址:www.npmjs.com/package/mit…

1.9slot

1.8pinia/vuex

1.4v-model

在vue3中一个组件可以通过使用多个v-model,让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize，以及绑定两个自定义事件update:pageNo与update:pageSize实现父子数据同步

1.5useAttrs

1.6ref与$parent

ref:在父组件内部通过ref获取子组件实例VC

parent：$parent可以获取某一个组件的父组件实例VC

1.7provide与inject

所有组件：

1.8pubsub

PubSub.publish('发布的消息名','提供给订阅者的参数')             //发布消息  ==>触发事件 比如点击事件

举例：PubSub.publish('infomation_1',data)

PubSub.subscribe('发布的消息名',事件的监听函数)                //订阅消息   ==>绑定事件监听 获取消息