300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue3组合式api实现组件传值

vue3组合式api实现组件传值

时间:2022-12-22 02:49:34

相关推荐

vue3组合式api实现组件传值

一、父组件向子组件传值

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就是传过来的数据})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。