vue2.x组件通信有哪些方式,vue组件通信几种方式
之前，我们描述了Vue3的七种通信用途。今天五篇文章，我们来看看Vue2的通讯用法的相关资料。有需要的可以参考以下文章的具体内容。
字体1 .建议2.sync 3 . v-model 4 . re F5 . $ emit/v-on 6。$attrs/$listeners7。$ children/$ parent 8 . provide/inject 9 . event bus 10 . vuex 11 . $ root 12 . slot下面把每一种组件通信方式的写法一一列出
目录
父组件向子组件传输数据，这应该是最常见的方式。
子组件收到数据后，不能直接修改父组件的数据。将会报告错误，因此当重新渲染父组件时，数据将会被覆盖。如果要在子组件中修改它，建议使用Computed。
//Parent.vue传输
模板
child :msg=msg/child
/模板
//Child.vue接收
导出默认值{
//写一个用数组接收。
道具：[msg]，
//写第二个按对象接收的方法，可以限制接收的数据类型，设置默认值，验证等。
道具：{
消息：{
类型：字符串，
默认：“这是默认数据”
}
},
已安装(){
console.log(this.msg)
},
}
1. props
它可以帮助我们实现父组件发送的数据与子组件的双向绑定，所以子组件收到数据后可以直接修改，也会修改父组件的数据。
//Parent.vue
模板
child :page.sync=page/child
/模板
脚本
导出默认值{
data(){
返回{
第1页
}
}
}
//Child.vue
导出默认值{
道具：[page]，
computed(){
//当我们修改子组件中的currentPage时，父组件的页面也会发生变化。
当前页面{
get(){
返回此页面
},
set(newVal){
这个。$emit(update:page ，newVal)
}
}
}
}
/脚本
2. .sync
类似于。sync，父组件到子组件的数据可以双向绑定，子组件通过$emit修改父组件的数据。
//Parent.vue
模板
子垂直模型=值/子
/模板
脚本
导出默认值{
data(){
返回{
值：1
}
}
}
//Child.vue
模板
输入：value= value @ input= handler change
/模板
导出默认值{
道具：[值]，
//可以修改事件名称，默认为input。
型号：{
事件：“更新值”
},
方法：{
手柄更换(e){
这个。$emit(input ，e.target.value)
//如果有上面的重命名就这样了
这个。$emit(updateValue ，e.target.value)
}
}
}
/脚本
3. v-model
如果ref在普通的DOM元素上，则引用指向DOM元素；
如果子组件的引用点是子组件实例，那么父组件可以主动获取子组件的属性或者通过ref调用子组件的方法。
//Child.vue
导出默认值{
data(){
返回{
姓名：“华牧”
}
},
方法：{
someMethod(msg){
console.log(消息)
}
}
}
//Parent.vue
模板
child ref=child/child
/模板
脚本
导出默认值{
已安装(){
const child=this。$refs.child
Console.log(child.name) //华牧
Child.someMethod(“调用了子组件的方法”)
}
}
/脚本
4. ref
子组件通过发送事件向父组件发送数据，或者触发父组件进行更新。
//Child.vue分布式
导出默认值{
data(){
Return {msg:这是发送给父组件的消息 }
},
方法：{
handleClick(){
这个。$emit(sendMsg ，this.msg)
}
},
}
//Parent.vue响应
模板
child v-on:send msg= get child msg /child
//或者速记
child @ send msg= get child msg /child
/模板
导出默认值{
方法：{
getChildMsg(msg){
Console.log(msg) //这是父组件收到的消息
}
}
}
5. $emit / v-on
当嵌套组件传输数据时，如果您只传输数据而不进行中间处理，则可以使用此方法。例如，当父组件将数据传输到孙组件时，$attrs：包含父范围中除class和style之外的一组非props属性。通过此获取父范围中所有符合条件的属性集。$attrs，然后继续将它们传递给子组件中的其他组件，这样就可以使用v-bind=$attrs
$listeners：包含监听事件的集合，除了。父范围中的本机。如果您想继续将它传递给子组件中的其他组件，可以使用v-on=$linteners
使用方式是相同的
//Parent.vue
模板
child:name= name title= 1111 /child
/模板
导出默认值{
data(){
返回{
姓名：“华牧”
}
}
}
//Child.vue
模板
//继续传递给孙子组件
sun-child v-bind= $ attrs /sun-child
/模板
导出默认值{
道具：[name]，//可以收也可以不收。
已安装(){
//如果道具收到名字，则为{title:1111}，否则为{name:华牧，title:1111}
console.log(这个。$attrs)
}
}
6. $attrs / $listeners
$children：获取包含所有子组件(不包括孙组件)的VueComponent对象数组，可以直接获取子组件中的所有数据和方法。$parent：获取父节点的VueComponent对象，其中也包含父节点中的所有数据和方法。
//Parent.vue
导出默认值{
已安装(){
这个。$ children [0]。some method()//调用第一个子组件的方法
这个。$children[0]。name //获取第一个子组件中的属性。
}
}
//Child.vue
导出默认值{
已安装(){
这个。$parent.someMethod() //调用父组件的方法
这个。$parent.name //获取父组件中的属性
}
}
7. $children / $parent
Provide/inject就是依赖注入，不建议直接在应用代码中使用，但是在一些插件或者组件库中常用，所以我觉得没什么用，还挺好用的。
provide：允许我们指定我们想要提供给组件的后代的数据或方法。inject：接收我们希望在任何未来的组件生成中添加到该组件的数据或方法，无论组件嵌套有多深，您都可以直接使用它们。
需要注意的是，provide和inject传输的数据是没有响应的，也就是说，inject接收到数据后，provide中的数据发生变化，后代组件中的数据不会发生变化，除非传入的数据是可监控的对象。
所以建议传递一些常量或者方法。
//父组件
导出默认值{
//方法一无法获取方法中的方法
提供：{
姓名：“华牧”，
年龄中的属性：this.data
},
//方法2无法获取数据中的属性
提供(){
返回{
姓名：“华牧”，
一些方法：this.somemethod//methods的方法
}
},
方法：{
someMethod(){
Console.log(这是注入的方法)
}
}
}
//后代组件
导出默认值{
注入：[name ， someMethod]，
已安装(){
console.log(this.name)
this.someMethod()
}
}
8. provide / inject
EventBus是中心事件总线，父子组件、兄弟组件和跨级组件都可以使用它来完成通信操作。
有三种定义。
/方法1:
//把它拉出来放到一个单独的js文件Bus.js中，然后在需要的地方引入
//Bus.js
从“vue”导入Vue
导出默认新Vue()
方法2:直接挂载到全局。
//main.js
从“vue”导入Vue
Vue.prototype.$bus=new Vue()
方法三 ：注入到 Vue 根对象上
//main.js
从“vue”导入Vue
新Vue({
埃尔： #app ，
数据：{
总线：新Vue()
}
})
使用如下，以方法一按需引入为例
//在需要向外部发送自定义事件的组件内
模板
Button @click=handlerClick 按钮/按钮
/模板
从导入总线。/Bus.js
导出默认值{
方法：{
handle click(){
//自定义事件名称sendMsg
公交车。$emit(sendMsg ，这是要发送到外部的数据)
}
}
}
//在需要接收外部事件的组件内
从导入总线。/Bus.js
导出默认值{
已安装(){
//监听事件的触发
公交车在( sendMsg ，data={
console.log(这是接收到的数据：,数据)
})
},
销毁前(){
//取消监听
公交车关闭( sendMsg )
}
}
9. EventBus
状态管理是状态管理器，集中式存储管理所有组件的状态。这一块内容过长，如果基础不熟的话可以看这个Vuex，然后大致用法如下
比如创建这样的文件结构
index.js 里内容如下：
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入吸气剂./getters
从导入操作。/操作
从导入突变。/突变
从导入状态100/州
从导入用户。/模块/用户
Vue.use(Vuex)
const store=new Vuex .商店({
模块：{
用户
},
吸气剂，
行动，
突变，
状态
})
导出默认存储
然后在 main.js 引入：
从“vue”导入某视频剪辑软件
从导入存储。/商店
新Vue({
埃尔： #app ，
店，
render: h=h(App)
})
然后在需要的使用组件里：
从" vuex "导入{ mapGetters，mapMutations }
导出默认值{
计算值：{
//方式一然后通过这个。属性名就可以用了
.mapGetters([引入getters.js里属性1,属性2])
//方式二
.mapGetters(user ，[user模块里的属性1,属性2])
},
方法：{
//方式一然后通过这个。属性名就可以用了
.mapMutations([引入突变。射流研究…里的方法1,方法2])
//方式二
.地图突变(用户,[引入用户模块里的方法1,方法2])
}
}
//或者也可以这样获取
这个10.99 $ store . state . XXX
这个10.25美元商店.州.用户. xxx
10. Vuex
$root可以拿到App.vue里的数据和方法
11. $root
就是把子组件的数据通过插槽的方式传给父组件使用，然后再插回来
//Child.vue
模板
差异
slot :user=user/slot
/div
/模板
导出默认值{
data(){
返回{
用户：{姓名：沐华 }
}
}
}
//Parent.vue
模板
差异
子v-slot=slotProps
{{ slotProps.user.name }}
/孩子
/div
/模板
到此这篇关于Vue2.x的12种组件通信的文章就介绍到这了，更多相关Vue2.x组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。