组件通信——props，emit

父子组件通信

父亲用子组件属性/方法

html:
<Son ref="sonHandler" />
重点是通过ref获取
script:
this.$refs.sonHandler.name //此处name用属性名或方法名都可以调用子组件Son的data/methods/computed里的方法/属性

子组件用父父亲的属性/方法

如果只用data里的属性，那有两种方法

第一种：通过props，这种方法不可以改父组件的值
第二种：用this.$parent.name，这样可以改父组件的属性值，而且父组件的也会跟着改

如果要用methods/compute

只能通过this.$parent.functioName()的方式

非父子组件通信

因为vue3从实例中移除了$on, $off, $once，所以现在要通过第三方插件mitt来实现非父子组件通信
https://www.npmjs.com/package/mitt
粗略：
定义一个公共mitt实例

const emitter = mitt()
export default emitter

然后需要的组件就引用它

触发：
emitter.emit("eventName", data) //触发的自定义事件，一个名字对应一个事件，一个事件执行一个函数（即名字要独一无二）,此处可以不传data，和$emit相似
监听：
emitter.on("eventName", (data) => {
  alert("我被触发了")
})

在组合式API里用emit

//先声明
let emit = defineEmits(["custom-event"])
//在指定事件里触发
const callFather = () => {
  emit("custom-event", someData)
}