1、props

概述：props是使用频率最高的一种通信方式，常用与：父<——>子。

• 若 父传子：属性值是非函数。
• 若 子传父：属性值是函数。

父组件：

javascript"><template><div class="father"><h3>父组件</h3><h4>汽车：{{car}}</h4><h4 v-show="toy">子给的玩具：{{toy}} </h4><Child :car="car" :sendToy="getToy" /><div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref} from 'vue'//数据let car = ref('奔驰')let toy = ref('')// 方法function getToy(value:string){toy.value = value}
</script>

javascript"><template><div class="child"><h3>子组件</h3><h4>玩具：{{toy}}</h4><h4>父给的车：{{car}} </h4><button @click="sendToy(toy)">把玩具给父亲</button><div>
</template><script setup lang="ts" name="Child">import {ref} from 'vue'//数据let toy = ref('奥特曼')// 声明接收propsdefineProps(['car','sendToy'])
</script>

2、自定义事件

javascript"><template><div class="child"><h3>子组件</h3><h4>玩具：{{toy}}</h4><button @click="emit('send-toy',toy)">测试</button><div>
</template><script setup lang="ts" name="Child">import {ref} from 'vue'let toy = ref('奥特曼')//声明事件const emit = defineEmits(['send-toy'])
</script>

 

javascript"><template><div class="father"><h3>父组件</h3><h4 v-show="toy">子给的玩具：{{toy}}</h4><Child @send-toy='saveToy'/><div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref} from 'vue';let toy = ref('')function saveToy(value:string){console.log('xyz',value)toy.value = value}
</script>

3、mitt

安装mitt 

npm i mitt

>> utils/emitter.ts
// 引入mitt
import mitt from 'mitt'
// 调用mitt得到emitter.能绑定事件，触发事件
const emitter = mitt()
// 绑定时间
emitter.on('test1',()=>{console.log('test1被调用了')
})
emitter.on('test2',()=>{console.log('test2被调用了')
})// 触发事件
setImterval(() => {emitter.emit('test1')emitter.emit('test2')
},2000);setTimeout(()=>{//emitter.off('test1')//emitter.off('test2')emitter.all.clear()
},3000);//暴露
export fefault emitter >> main.tsimport emitter from '@/utils/emitter'

>> Child1.vue
<template><div class="child1"><h3>子组件1</h3><h4>玩具：{{toy}}</h4><button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button></div>
</template><script setup lang="ts" name="Child1">import {ref} from 'vue'let toy = ref('奥特曼')</script>>> Child2.vue<template><div class="child2"><h3>子组件2</h3><h4>电脑：{{computer}}</h4><h4>哥哥给的玩具：{{toy}}</h4></div>
</template><script setup lang="ts" name="Child2">import {ref,onUnmounted} from 'vue'import emitter from '@/utils/emitter';let computer= ref('联想')let toy = ref('')// 给emitter绑定send-toy事件emitter.on('send-toy',(value:string)=>{toy.value = value})
//在组件卸载时解绑send-toy事件
onUnmounted(()=>{emitter.off('send-toy')
})</script>