Vue组件通信

简单介绍：

什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

• 组件的数据是独立的，无法直接访问其他组件的数据。
• 想使用其他组件的数据，就需要组件通信

.组件关系分类

1. 父子关系
2. 非父子关系

.父子通信流程

1. 父组件通过 props 将数据传递给子组件
2. 子组件利用 $emit 通知父组件修改更新

父向子传值步骤

1. 给子组件以添加属性的方式传值
2. 子组件内部通过props接收
3. 直接使用 props接收的值

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知
2. 父组件监听$emit触发的事件
3. 提供处理函数，在函数的性参中获取传过来的参数

代码示例：
子主键

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 {{title}}
    <button @click="changeFn">修改title</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['title'],
  methods:{
    changeFn(){
      this.$emit('changeTitle','传智教育')
    }
  }
  
}
</script>

<style>

</style>

父主键：

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="myTitle" @changeTitle="handelChange"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue"
export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      myTitle: "学前端，就黑马程序员",
    }
  },
  methods:{
    //提供处理函数，处理逻辑
    handelChange(newTitle){
      this.myTitle=newTitle
    }
  }
}
</script>

<style>
</style>

·Props

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

1. 可以 传递 任意数量 的prop
2. 可以 传递 任意类型 的prop

父主键：

<template>
  <div class="app">
    <UserInfo :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
      ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>

子主键

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年龄：{{age}}</div>
    <div>是否单身：{{isSingle ? '是' :'否'}}</div>
    <div>座驾：{{car.brand}}</div>
    <div>兴趣爱好  {{hobby.join(',')}} </div>
  </div>
</template>

<script>
export default {
  props:['username','age','car','hobby','isSingle']
}
</script>

<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

props校验

1.作用

组件的props是不可以乱传的，props校验为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示

2.语法

• 类型校验
• 非空校验
• 默认值
• 自定义校验

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）
2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值
父组件

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 60,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

子组件

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  //类型校验对象写法
  // 1.基础写法（类型校验）
  // props:{
  //   w:Number
  // },

  // 2.完整写法（类型、是否必填、默认值、自定义校验）
      props:{
        w:{
          type:Number,
          required:true,
          default:0,         //默认值
          validator(value){
            if(value>=0 && value <=100){
              return true
            }else{
              console.error('w值应该在0-100之间')
              return false
            }
          }
        }
      }

}
</script>

<style scoped> 
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

• data 的数据是自己的 → 随便改
• prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

父组件

<template>
  <div class="app">
    <BaseCount :count="count" @changCount="handelChange"></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    handelChange(newCount){
      this.count=newCount
    }
  }
}
</script>

<style>

</style>

子组件

<template>
  <div class="base-count">
    <button @click="sub">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props:{
    count:{
      type:Number,
    }
  },
  methods:{
    add(){
      this.$emit('changCount',this.count+1)
    },
    sub(){
      this.$emit('changCount',this.count-1)
    }
  }
 
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

使用语法

1. 父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

2.子/孙组件都可以通过 inject获取数据

export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

类型写法：

4.注意

• provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
• 子/孙组件通过inject获取的数据，不能在自身组件内修改