vue3.0组件通信,vue组件通信几种方式
Vue3兼容Vue2的大部分特性，Vue3可以用Vue2代码开发，包大小降低41%，初始渲染速度降低55%，更新速度降低133%，内存占用降低54%。本文主要介绍Vue3的七个组件的通信，有需要的可以参考下面文章的具体内容。
目录
1、Vue3组件的通信方式2、Vue3的通信方式2.1 props 2.2 $ emit 2.3 expose/ref 2.4 attrs 2.5v-model 2.6 provide/inject 2.7 vuex
1、Vue3 组件通信方式
小道具
$emit
暴露/引用
$attrs
v型车
提供/注入
状态管理
2、Vue3 通信使用写法
2.1 props
有两种方法可以通过props将数据传输到子组件，如下所示
方法一：混合写法
//Parent.vue传输
child:msg 1= msg 1 :msg 2= msg 2 /child
脚本
从导入子级。/child.vue
从“vue”导入{ ref，reactive }
导出默认值{
data(){
返回{
Msg1:“这是子组件1的信息”
}
},
setup(){
//创建响应数据
//编写方法1适用于基本类型ref，还有其他用途，在下一章介绍。
Const msg2=ref(这是子组件的信息2 )
//写2适用于复杂类型，比如数组和对象。
Const msg2=reactive([这是子组件2的信息])
返回{
msg2
}
}
}
/脚本
//Child.vue接收
脚本
导出默认值{
道具：[msg1 ， msg2]，//这行没写，下面就收不到了。
设置(道具){
Console.log(props) //{msg1:这是给子组件的消息1 ，msg2:这是给子组件的消息2 }
},
}
/脚本
方法二：纯 Vue3 写法
//Parent.vue传输
child :msg2=msg2/child
脚本设置
从导入子级。/child.vue
从“vue”导入{ ref，reactive }
Const msg2=ref(这是传递给子组件的信息2 )
//或者复杂类型。
Const msg2=reactive([这是子组件2的信息])
/脚本
//Child.vue接收
脚本设置
//不需要介绍直接使用
//从“vue”导入{ defineProps }
const props=defineProps({
//编写方法一
msg2:字符串
//书写方法2
msg2:{
类型：字符串，
默认值：“”
}
})
Console.log(props) //{msg2:这是子组件2的信息 }
/脚本
注意：
如果父组件是混合编写的，子组件是纯Vue3编写的，则不能接收父组件中的数据属性，只能接收父组件中setup函数传递的属性。
如果父组件用纯Vue3编写，子组件用混合方式编写，可以通过props接收数据和设置函数中的属性，但如果在设置中接收子组件，只能接收父组件设置函数中的属性，不能接收数据中的属性。
官方也说了，既然用3，就不要写2，所以不建议混写。在下面的例子中，只使用了纯Vue3，所以不会使用混合编写。
2.2 $emit
//Child.vue分布式
模板
//编写方法一
Button @click=emit(myClick )按钮/按钮
//书写方法2
Button @click=handleClick 按钮/按钮
/模板
脚本设置
//方法1适用于3.2版，无需介绍。
//从“vue”导入{ defineEmits }
//对应的写法1
const emit=define emits([ my click ， myClick2])
//对应写2
const handleClick=()={
发出( myClick ，这是发送给父组件的信息)
}
//方法2不适用于3.2版，其中useContext()已被放弃。
从“vue”导入{ useContext }
const { emit }=useContext()
const handleClick=()={
发出( myClick ，这是发送给父组件的信息)
}
/脚本
//Parent.vue响应
模板
child @ my click= on cyclick /child
/模板
脚本设置
从导入子级。/child.vue
const on cyclick=(msg)={
Console.log(msg) //这是父组件收到的信息
}
/脚本
2.3 expose / ref
父组件获取子组件的属性或者调用子组件方法
//Child.vue
脚本设置
//方法1不适用于3.2版，其中useContext()已被放弃。
从“vue”导入{ useContext }
const ctx=useContext()
//对外暴露属性方法等都可以
ctx.expose({
childName:这是子组件的属性，
someMethod(){
console.log(这是子组件的方法)
}
})
//方法二适用于Vue3.2版本，不需要引入
//从“vue”导入{ defineExpose }
defineExpose({
childName:这是子组件的属性，
someMethod(){
console.log(这是子组件的方法)
}
})
/脚本
//Parent.vue注意ref=comp
模板
子ref= comp /子
button @click=handlerClick 按钮/按钮
/模板
脚本设置
从导入子级 child.vue
从“vue”导入{ ref }
const comp=ref(空)
const handlerClick=()={
控制台。日志(比较。价值。孩子的名字)//获取子组件对外暴露的属性
comp.value.someMethod() //调用子组件对外暴露的方法
}
/脚本
2.4 attrs
attrs：包含父作用域里除班级和风格除外的非小道具属性集合
//Parent.vue传送
child:msg 1= msg 1 :msg 2= msg 2 title= 3333 /child
脚本设置
从导入子级 child.vue
从“vue”导入{参考，反应}
const msg1=ref(1111 )
const msg2=ref(2222 )
/脚本
//Child.vue接收
脚本设置
从“vue”导入{ defineProps，useContext，useAttrs }
//3.2版本不需要引入定义推广，直接用
const props=defineProps({
msg1:字符串
})
//方法一不适用于Vue3.2版本，该版本useContext()已废弃
const ctx=useContext()
//如果没有用小道具接收msg1的话就是{ msg1: 1111 ，msg2:2222 ，标题： 3333 }
控制台。日志(CTX。attrs)//{ msg 2: 2222 ，标题： 3333 }
//方法二适用于Vue3.2版本
const attrs=useAttrs()
控制台。log(attrs)//{ msg 2: 2222 ，标题： 3333 }
/脚本
2.5 v-model
可以支持多个数据双向绑定
//Parent.vue
子虚拟模型：key=key 虚拟模型：value=value/child
脚本设置
从导入子级 child.vue
从“vue”导入{参考，反应}
const key=ref(1111 )
常数值=ref(2222 )
/脚本
//Child.vue
模板
button @click=handlerClick 按钮/按钮
/模板
脚本设置
//方法一不适用于Vue3.2版本，该版本useContext()已废弃
从“vue”导入{ useContext }
const { emit }=useContext()
//方法二适用于Vue3.2版本，不需要引入
//从“vue”导入{定义限制}
const emit=defineEmits([key ， value])
//用法
const handlerClick=()={
发出(更新：密钥，新的键)
发出(更新：值，新的价值)
}
/脚本
2.6 provide / inject
提供/注入为依赖注入
提供：可以让我们指定想要提供给后代组件的数据或
注入：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用
//Parent.vue
脚本设置
从“vue”导入{提供}
提供(名称,沐华)
/脚本
//Child.vue
脚本设置
从“vue”导入{注入}
const name=inject(name )
console.log(名称)//沐华
/脚本
2.7 Vuex
//商店/索引。射流研究…
从" vuex "导入{ createStore }
导出默认的createStore({
状态：{计数：1 },
getters:{
getCount: state=state.count
},
突变：{
添加（状态){
状态。计数
}
}
})
//main.js
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入存储。/商店
createApp(应用程序)。使用（存储)。挂载(#应用程序)
//Page.vue
//方法一直接使用
模板
div{{ $store.state.count }}/div
button @ click= $ store。提交( add )按钮/按钮
/模板
//方法二获取
脚本设置
从" vuex "导入{ useStore，computed }
const store=useStore()
控制台。日志(存储。状态。计数)//1
const count=computed(()=store。状态。计数)//响应式，会随着状态管理数据改变而改变
console.log(count) //1
/脚本
关于Vue3的七个组件的通信细节的这篇文章就到这里了。关于Vue3的七个组件的通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。