Vue组件通信

父——> 子

父组件传子组件，通过props传递

props使用步骤

在子组件标签中写要传入的data函数
<Son :title="myTitle"></Son>

data函数返回一个title元素
data() {
    return {
      myTitle: "父传子元素",
    }
  }


子组件通过props来接受
  props:['title']

直接使用{{}}调用
我是Son组件 {{ title }}

操作实例

props校验

作用：为组件的props指定验证要求，不符合要求，控制台就会报错

语法1：简单校验

props：{
校验的属性名：类型    //Number String Boolean
}

语法2：完整校验

 props:{
    属性名:{
      type:Number,    //类型
      required:true,    //非空
      default:0,        //默认
      validator(value){    //自定义校验
        if(value >= 0 && value <= 100){
        return true
        }else{
        return false
      }

子——>父

子组件传父组件，通过$emit通知父组件，进行修改更新

$emit使用步骤

子组件按钮绑定函数
<button @click="fn">修改title</button>

在methods中创建函数，'btn'是可以自定义的点击事件名
methods:{
    fn(){
      this.$emit('btn','修改成功')
    }
  }

回到父组件，注册接受事件btn，后创建函数
<Son :title="myTitle" @btn="titleXiu"></Son>

在methods创建titleXiu函数，在函数中写个值接收传参
methods:{
    titleXiu(value){
      this.myTitle = value
    }
  }

操作实例

非父子通信

作用：非父子组件之间，进行简易消息传递

场景：组件A（接收），组件B（发送），Event Bus时间总线

1.创建应该都能访问的事件总线(空Vue实例）

import Vue from 'vue'
const Bus = new Vue()
export default Bus

 2.组件B（发送方），触发Bus实例的事件

Bus.$emit('sendMsg','想要发送的消息写这里')

3.组件A（接受方），监听Bus实例的事件

created(){
    Bus.$on('sendMsg',(msg)=>{
    this.msg = msg    
    })
}

实操

非父子通信provide&inject：

1.父组件provide提供数据

export default{
    provide(){
       return{
        属性名:this.属性名,    //普通类型[非响应式]
        属性名：this属性名   //复杂类型[响应式]
        }
    }
}

2.子/孙组件inject取值使用

exprot default{
    inject :['属性名'],
    created(){
    console.log(this.属性名)
    }
}

3.如下