一、父组件向子组件传值
1、在子组件中使用defineProps来定义props
defineProps({自定义数据:{type:数据类型,default:默认值}})
2、在父组件中找到子组件标签,在子组件标签上使用v-bind:自定义数据名="要发送的数据“
二、子组件向父组件传值
1、在子组件中定义事件,使用defineEmits来发送数据
<button @click="事件"></button>const emit=defineEmits(['方法名1’,’方法名2‘])const 事件名=()=>{emit(’方法名1‘,要发送的数据)emit(’方法名2‘,要发送的数据)}
2、在父组件中找到子组件标签,在子组件标签上使用@方法名1=”新的方法名“
<子组件标签 @方法名1=”新的方法名“></子组件标签>const 新的方法名=(data)=>{console.log(data) //data就是子组件发送过来的数据}
三、非父子组件传值
1、安装mitt插件
npm i mitt --save-dev
2、创建bus.js文件
import mitt from 'mitt'const bus=mitt()export default bus
3、在需要发送数据的组件中,使用bus.emit发送数据
import bus from '路径'const 事件=()=>{bus.emit('新的方法名',要发送的数据)}
4、在接受数据的组件中,使用bus.on接收数据
import bus from 'bus'bus.on('新的方法名',(data)=>{console.log(data) //data就是传过来的数据})