vue3.0组件通信,vue组件间通信六种方式(完整版)
在本篇文章里小编给大家整理的是一篇关于vue3组件通信的方式总结及实例用法，对此有兴趣的朋友们可以跟着学习下。
vue3组件通信方式为以下几种
小道具
$emit
$expose/ref
$attrs
v型车
提供/注入
状态管理
手
props
child :msg2=msg2 /
脚本设置
const props=defineProps({
//写法一
msg2:字符串
//写法二
msg2:{
类型：字符串，
默认值：""
}
})
console.log(props) //{msg2:这是传级子组件的信息2}
/脚本
$emit
//Child.vue
模板
//写法一
div @click=emit(myclick )按钮/div
//写法二
div @click=handleClick 按钮/div
/模板
脚本设置
//方法一
const emit=define发出([ my click ]，[myClick2])
//方法二
const handleClick=()={
发出( myClick ，这是发送给父组件的信息);
}
//方法二不适用于vue3.2，使用的useContext()已经舍弃
从“vue”导入{ useContext }
const { emit }=useContext()
const handleClick=()={
发出( myClick ，这是发送给父组件的信息
}
/脚本
//Parent.vue响应
模板
child @ my click= on cyclick /child
/模板
脚本设置
从导入子级 child.vue
import onMychilk=(msg)={
console.log(消息)//父组件收到的信息
}
/脚本
expose / ref
父组件获取子组件的属性或者调用子组件方法
脚本设置
//方法一：useContext() vue3.2之后已经舍弃
从“vue”导入{ useContext }
const ctx=useContext()
//对外暴露属性方法等都可以
ctx.expose({
childName:这是子组建的属性，
someMethod(){
console.log(这是子组件的方法)
}
})
/脚本
//Parent.vue注意ref=comp
模板
子ref= comp /子
button @click=handleClick 按钮/按钮
/模板
脚本
从导入子级 child.vue
从“vue”导入{ ref }
const comp=ref(空)
const handleClick=()={
控制台。日志(比较。价值。孩子的名字)
comp.value.someMethod() //调用子组件对外暴露的方法
}
/脚本
attts
属性：包含父作用域除班级和风格除外的非小道具属性集合
//父组件
child:msg 1= msg 1 :msg 2= msg 2 title= 3333 /child
脚本设置
从导入子级 child.vue
从“vue”导入{参考，反应}
const msg1=ref(111 )
const msg2=ref(222 )
/脚本
//子组件
脚本设置
从“vue”导入{定义Props，useContext，useAttars }
const props=defineProps({
msg1:字符串
})
//方法一
const ctx=useContext()
控制台。日志(CTX。attars)//{ msg 2: 222 ，标题： 333}
//方法2
const attrs=useAttars()
控制台。log(attars)//{ msg 2: 2222 ，标题： 3333}
/脚本
v-model
可以支持多个数据双向绑定
子虚拟模型：key= key v-model:value= value /
脚本
从导入子级 child.vue
从“vue”导入{参考，反应}
const key=ref(111 )
常数值=ref(222 )
/脚本
//子组件
模板
按钮@ click=手柄点击/按钮
/模板
脚本设置
//方法一v3.2已被移除
从“vue”导入{ useContext }
const { emit }=useContext()
//方法二
从“vue”导入{定义限制}
const emit=defineEmits([key ， value])
//用法
const handleClick=()={
发出(更新：密钥，新的键)
发出(更新：值，新的价值)
}
/脚本
provide / inject
提供/注入为依赖注入提供：可以让我们指定想要提供给后代组件的数据注入：在任何后代组件中接受想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用
//父组件
脚本设置
从“vue”导入{提供}
const name=provide(name )
console.log(name ，沐华)
/脚本
//子组件
脚本设置
从“vue”导入{注入}
const name=inject(name )
console.log(名称)//木华
/脚本
Vuex
//商店/索引。射流研究…
从" vuex "导入{ createStore }
导出默认的createStore({
状态：{计数：1},
getters:{
getCount:state=state.count
},
突变：{
添加（状态){
状态。计数
}
}
})
//main.js
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入存储。/商店
createApp(应用程序)。使用（存储)。挂载(#应用程序)
//直接使用
模板
差异
{{ $store.state.count }}
/div
button @ click= $ store。提交( add )
/按钮
/模板
//获取
脚本设置
从" vuex "导入{ useStore，computed }
const store=useStore()
console.log(store.state.count)
const count=computed(()=store。状态。计数)
console.log(计数)
/脚本
mitt
Vue3中已经没有了事件总线跨组件通信，替代方案mitt.js，但原理方式事件总线是一样的
安装方式国家预防机制一米特构成名词复数
封装
米特。射流研究…
从“米特”导入手
const mitt=mitt()
导出默认手套
组件之间使用
//组件A
脚本设置
从导入米特./米特
const handleClick=()={
mitt.emit(handleChange )
}
/脚本
//组件B
脚本设置
从导入米特./米特
从“vue”导入{未装载的}
const someMethod=()={.}
mitt.on(handleChange ，someMethod)
未安装(()={
mitt.off(handleChange ，someMethod)
})
/脚本
到此这篇关于vue3组件通信的方式总结及实例用法的文章就介绍到这了，更多相关vue3组件通信的几种方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。