vue组件之间是如何进行通信的，有哪几种常见的通信方式

最新推荐文章于 2023-11-04 20:01:50 发布

陈一兔

最新推荐文章于 2023-11-04 20:01:50 发布

阅读量497

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48725904/article/details/126178756

版权

本文详细介绍了Vue组件间通信的常见方式，包括props（父->子）及其注意事项，如属性命名、非prop属性处理；$emit（子->父）事件传递；Provide/Inject用于深层组件通信；Mitt作为全局事件总线的使用；以及在何时考虑使用Vuex状态管理。内容结合实例，适合初学者学习。

摘要由CSDN通过智能技术生成

提示：小白第一次写文章，有错误的地方还请多多指正~
如果对你有帮助的话，记得给我一点鼓励哟~

提示：以下是本篇文章正文内容，下面案例可供参考

一、props/$emit

在开发中最常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件进行展示，这个时候我们就可以使用props来完成组件间通信

1.什么是props

props是开发者在组件上注册一些自定义的attribute
父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值
简单理解：props是定义在子组件中的数据，父组件通过prop的属性值连接起来

1.1 props的两种常见用法

字符串数组

数组中的字符串就是attribute的名称

props:['propA','propB']

对象类型

不仅可以指定attribute的名称，还可以指定需要传递的类型(可以是String、Number、Boolean、Array、Object、Date、Function、Symbol以及自定义类型)、是否必须、默认值等

props:{
   
	propA:String,
	//多个可能的类型
	propB:[String,Number],
	propC:{
   
		type:String,
		required:true,
		default:'你好',
	},
	//注意：如果传入的类型为对象，那么默认值应该写成函数形式
	propD:{
   
		type:Object,
		default(){
   
			return {
   message:'hello'}
		}
	},
	//自定义验证函数
	propE:{
   
		validator(value){
   
			//传入的值必须匹配下面数组中的一个
			return ['success','warning','danger'].includes(value)
		}
	}	
}

1.2 props的大小写问题

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。意味着在使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

 // 在 JavaScript 中是 camelCase 的
props:['postTitle'],

<!-- 在 HTML 中是 kebab-case 的 -->
<my-vue post-title="hello!"></my-vue>

1.3 非prop的attribute

传递给一个组件某个属性，但是该属性并没有对应定义的props或者emits，就称之为非prop的attribute
简单理解，常见的class、id、style属性就是非prop的attribute

attribute继承

当组件中有单个根节点时，非prop的attribute将自动添加到根节点的attribute中

禁用attribute继承

设置inheritAttrs：false
禁用的情况多发生在：需要将attribute应用于根元素之外的其他元素
我们可以通过$attrs来访问所有的非prop的attribute

1.4 props（父 -> 子）示例

//子组件
<script>
export default ({
     
    props:{
     
	//在子组件中定义prop，用来接收父组件传递的数据
        titles:{
     
            type:Array,
            default(){
     
                return []
            }
        }
    },
})
</script>

<template>
    <div class="tab-controls">	
		<!-- 在子组件中加粗样式将父组件传递的数据，进行展示 -->    
        <div
            v-for="(title,index) in titles" 
            :key="title"
            @click="clickItems(index)">
            <span>{
  {title}}</span>
        </div>
    </div>  
</template>


// 父组件
<template>
  <div >
  	<!-- 在父组件，通过prop属性名titles将数据传递给子组件，要传递的数据就是该属性名绑定的属性值title(这个数据是父组件中的数据)-->