一、父组件向子组件传值
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就是传过来的数据
})