详解vue组件之间的通信

2023-07-17 15:34:04 74

说明：下面我总结了比较常用的vue组件之前通信的方式，最近准备面试，所以有些总结贴上来分享

props和$emit

只有父子关系才可以用这种方式，父组件向子组件传递参数用props，子向父传递使用触发$emit自定义事件

1.props



...
data(){
return{
name:'marry'
}
}



post:{
id:1,
title:'MyJourneywithVue'
}
//等价于下面




...
//以字符串数组形式列出的prop
props:['name','age','address']

//prop验证,当prop验证失败的时候，(开发环境构建版本的)Vue将会产生一个控制台的警告
//注意：以下类型不能写成'String'这种带引号的形式
props:{
//基础的类型检查(`null`和`undefined`会通过任何类型验证)
propA:Number,
//多个可能的类型
propB:[String,Number],
//必填的字符串
propC:{
type:String,
required:true
},
//带有默认值的数字
propD:{
type:Number,
default:100
},
//带有默认值的对象
propE:{
type:Object,
//对象或数组默认值必须从一个工厂函数获取
default:function(){
return{message:'hello'}
}
},
//自定义验证函数
propF:{
validator:function(value){
//这个值必须匹配下列字符串中的一个
return['success','warning','danger'].indexOf(value)!==-1
}
}
}
//注意那些prop会在一个组件实例创建之前进行验证，所以实例的property(如data、computed等)在default或validator函数中是不可用的。

2.$emit



...
methods:{
myEvent(name){
this.name=name
}
}





//使用自定义事件将子组件的值抛给父组件

中央事件总线bus

用于解决跨级和兄弟组件通信问题，巧妙的使用一个公共的vue实例，利用$on,$emit,$off(移除自定义事件监听器)

方法一：

可以在main.js中，在Vue的原型上挂载一个公共的Vue实例$bus，这样全局任何一个地方都可以使用

Vue.prototype.$bus=newVue()

然后在需要的地方注册自定义事件和接收参数的回调函数

this.$bus.$on('changeName',name=>{
this.name=name
})

在需要改变的时候触发事件并抛出参数

this.$bus.$emit('changeName','wzj')

方法二：

定义一个util.js文件

importVuefrom'vue'

constbus=newVue()
exportdefaultbus

在需要用到bus的文件中引入

importbusfrom'../util'//文件路径不一定

//在一个文件定义事件
bus.$on('changeName',name=>{
this.name=name
})

//另一个文件抛出参数
bus.$emit('changeName','wzj')

vuex

对于项目比较复杂，多组件共享状态，不同层级需要通信

核心概念：

state,getter,mutation,action,module

//store/index.js
importVuefrom'vue'
importVuexfrom'vuex'

Vue.use(Vuex)

exportdafaultnewVuex.Store({
state:{
name:'',
age:0
},
getters:{
tranName(state){
return'name:'+state.name
}
},
mutations:{
changeName(state,name){
state.name=name
}
},
/*Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters*/
actions:{//异步函数，但还是要通过提交commit触发mutations函数操作state
changeName(context,name){
context.commit('changeName',name)
}
},
modules:{}
})

在组件中使用

方法一：

//访问state属性
this.$store.state.name
//访问getters属性
this.$store.getters.tranName
//访问mutations
this.$store.commit('changeName','wzj')
//访问actions
this.$store.dispatch('changeName','wzj')

方法二：使用辅助函数映射到本地，这里只列举了简便的方式，更多查阅官网吧

import{mapState,mapGetters,mapMutations,mapActions}from'vuex'
//state和getters映射到本地的computed属性中，作为计算属性使用
computed:{
...mapState(['name','age']),
...mapGetters(['tranName'])
}

//mutations和actions
methods:{
//将`this.changeName()`映射为`this.$store.commit('changeName')`
...mapMutations(['changeName'])
//将`this.changeName()`映射为`this.$store.dispatch('changeName')`
...mapActions(['changeName'])
}

$attrs和$listeners

父组件与后代组件，用以上方法有点大材小用或者第一种有些不方便

$attrs包含了父作用域中不作为prop被识别(且获取)的attribute绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件。
$listeners包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。

例子：

//app.vue



...
data(){
return{
age:10
}
},
methods:{
changeAge(age){
this.age=age
}
}

//one.vue

姓名：{{name}}
年龄：{{age}}

点我2

...
props:['name','age'],

//two.vue

{{address}}
点我2

...
props:['address'],//用$attrs传递到最后的属性，在使用的时候还是要声明props
methods:{
change(){
this.$emit('changeAge',30)
}
}

理解：其实祖先组件的属性和事件还是一层层往下传，不过用$attrs和$listeners优化和简便了传递过程中书写，而且在传递的过程中，任何一个声明了$listeners的组件都可以触发里面的所有事件，而声明了$attrs的组件只能使用之前未用props声明的剩下的属性。

以上就是vue组件之间的通信的详细内容，更多关于vue组件通信的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解vue组件之间的通信

热门推荐

随机推荐