一、vue3组件通信方式
vue2组件通信方式：
- props:可以实现父子组件、子父组件、甚至兄弟组件通信
- 自定义事件:可以实现子父组件通信
- 全局事件总线$bus:可以实现任意组件通信
- pubsub:发布订阅模式实现任意组件通信
- vuex:集中式状态管理容器，实现任意组件通信
- ref:父组件获取子组件实例VC,获取子组件的响应式数据以及方法
- slot:插槽(默认插槽、具名插槽、作用域插槽)实现父子组件通信........
1.1props
props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！
父组件给子组件传递数据
<Child info="我爱祖国" :money="money"></Child>子组件获取父组件传递数据:方式1
let props = defineProps({info:{type:String,//接受的数据类型default:'默认参数',//接受默认数据},money:{type:Number,default:0
}})子组件获取父组件传递数据:方式2
let props = defineProps(["info",'money']);子组件获取到props数据就可以在模板中使用了,但是切记props是只读的(只能读取，不能修改)
1.2自定义事件
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。
原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave....
自定义事件可以实现子组件给父组件传递数据
1.2.1原生DOM事件
代码如下:
<pre @click="handler">我是祖国的老花骨朵</pre>当前代码级给pre标签绑定原生DOM事件点击事件,默认会给事件回调注入event事件对象。当然点击事件想注入多个参数可以按照下图操作。但是切记注入的事件对象务必叫做$event.
<div @click="handler1(1,2,3,$event)">我要传递多个参数</div>在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
<!--vue2中却不是这样的,在vue2中组件标签需要通过native修饰符才能变为原生DOM事件-->
1.2.2自定义事件
自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。
比如在父组件内部给子组件(Event2)绑定一个自定义事件
<Event2 @xxx="handler3"></Event2>在Event2子组件内部触发这个自定义事件defineEmits(["xxx"]);
<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>在script标签内部,使用了defineEmits方法，此方法是vue3提供的方法,不需要引入直接使用。defineEmits方法执行，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个$emit方法用于触发自定义事件。
当点击按钮的时候，事件回调内部调用$emit方法去触发自定义事件,第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。
需要注意的是:代码如下
