vue3组件通信的方式 父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库

vue3组件通信的方式

一、父传子 props 和子传父 $emit

---

1、父传子 props

在开发中最常见的就是父子组件之间通信，父组件往子组件通信使用的是props。子组件往父组件通信则使用的是 $emit

父组件代码：

使用 message=“从父组件传到子组件” 将数据传到about子组件中。

<template>
  <about message="从父组件传到子组件"></about>
</template>

<script>
import about from './componets/about.vue'
export default {
   
  name: 'App',
  components:{
   
    about
  }
}
</script>

<style>
</style>

子组件接收数据：

使用props接收从父组件中传过来的数据

<template>
  <h3>{
   {
   message}}</h3>
</template>

<script>
export default {
   
  name:'AppAbout',
  props:['message']

}
</script>

<style>

</style>

除了使用数组接收之外还可以有一下几种方式:
1.使用对象接收的话可以为message设置类型

  props:{
   
    message:String
  }

2.将message 设置为数组的话可以设置匹配多个类型

  props:{
   
    message:[String,Number]
  }

3.除了可以设置类型之外还可以设置默认值和是否是必须传递的参数
default：默认值
require：是否是必传的值
当然了设置了默认值就没必要设置必传了

  props:{
   
    message:{
   
      type:String,
      default:"默认值",
      require:true
    }
  }

4.还可以自定义一些验证函数
验证 sex 是否是男或者女

  props:{
   
    sex:{
   
      validator(value){
   
        return ['男','女'].includes(value)
      }
    }
  }

5.注意数组或者对象的默认值必须是通过函数return出去的一个值
因为数组和对象都是属于复杂数据类型，为了保持使用组件的时候，多个组件不出现数据污染的情况必须使用函数return 出去一个对象或者数组。原理是使用函数return 出来的一个数组或者对象都在堆空间中拥有独立的空间都是互不干扰的。

  props:{
   
    nameArr:{
   
      type:Array,
      default(){
   
        return ["小红","小明","小李"]
      }
    }
  }

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

  <about :userName="user.name"></about>
  <about :user-name="user.name"></about>

7.当从父组件中传递出来的数据在子组件中没有设置props接收的时候。Vue就会将属性传递到子组件的根元素中。常见的属性：class、style、id。
父组件内容：

<template>
  <about id="about" class="about" style="background:red" fff="'ddd'"></about>
</template>
<script>
import about from './componets/about.vue'
export default {
   
  name: 'App',
  components:{
   
    about
  }
}
</script>
<style>
</style>

子组件内容：

<template>
  <span>about内容</span>
</template>
<script>
export default {
   
  name:'AppAbout',
  props:{
   
  }
}
</script>
<style>
</style>

浏览器样式：

由于子组件没有在props中接收id、class、style、fff，所有这些元素自动继承到了子元素的根元素中。

特殊情况：

1.如果不想根元素继承可以设置inheritAttrs:false 。
子组件：

<template>
  <about>about内容</about>
</template>
<script>
export default {
   
  name:'AppAbout',
  props:{
   
  },
  inheritAttrs:false
}
</script>
<style>
</style>

浏览器样式：

2.当不想将父组件传递过来的数据继承到子组件的根元素的时候，可以通过 设置inheritAttrs:false禁止继承到根元素上。再通过 $attrs 获取到重父组件传递过来的数据。

浏览器样式：

3.当子组件中没有根元素的时候，他就不会继承了。当然控制台中会报警告，我们必须手动的指定要绑定到哪一个属性上。
子组件：

<template>
  about内容
</template>
<script>
export default {
   
  name:'AppAbout',
  props:{
   
  }
}
</script>
<style>
</style>

浏览器样式：

4.当拥有多个根元素的时候，也不会继承。同样的在控制台中会报警告。
子组件：

<template>
  <div>about内容一</div>
  <div>about内容二</div>
  <div>about内容三</div>
</template>
<script>
export default {
   
  name:'AppAbout',
  props:{
   
  },
  inheritAttrs:false
}
</script>
<style>
</style>

浏览器样式：

2、子传父 $emit

通过再子组件中emits中注册自定义事件，然后在某个时间发射自定义事件 $emit。最后在父组件中监听到自定义事件，触发绑定的方法。
父组件：