Vue组件通信

1. 夫传子

概述 : 父组件 在子组件身上通过自定义属性传值,子组件内通过props接收值

props属性：用于父组件传递数据给子组件,这样子组件就可以使用该值

注意 : 我们在子组件接收到的值并改变他的值不会影响父组件的状态

- 父组件

//你导入的子组件中自定义属性
<Tab :name="name"></Tab>

- 子组件

//通过props来接收父组件传的值
export default {
  props:{
    name: Array,  //传过来的数据进行定义
     name:{
         type:Array,//接收name的类型
         required:true, //name必要,也就是必须传的
         default:99//你传我就用你的,你不传我就用默认值
     }
  }
}

2. 子传夫

概述 : 父组件 提前在子组件身上通过自定义事件绑定事件,子组件内通过$emit触发事件并传值

- 父组件

<template>
 <Tab @cur="curs"></Tab> 
 <!-- @cue这个事件就是子组件用这个事件来传递参数用curs函数来接收 -->
 <template>
 <script>
  methods: {
    curs(data){ //这里就是子组件传递过来的参数
      this.click_index = data; 
    }
  },
  </script>

- 子组件

<template>
<div @click="函数(参数)"></div>
</template>
<script>
export default {
  methods:{
    函数(参数){
      this.$emit('cur',参数) //cur就是父组件的事件,来进行传递参数
    }
  }
}
</script>

3. 兄弟组件通信也适用于任意组件通信

创建全局事件总线 来实现通信

$bus的值是一个Vue实例，this指向的就是这个Vue实例

我们在用完之后要销毁，否则回出现内存泄漏的现象

//在main.js中执行
//把vue实例绑定在vue原型对象上,这样任何组件都可以找到
new Vue({
  el:"#app",
  render:h=>h(App),
  beforeCreate(){
    Vue.prototype.$bus = this//安装全局事件总线
  }
})
// //更好的实现同级组件通信
// 一个兄弟this.$bus.$on监听
// 另一个兄弟this.$bus.$emit触发事件传值
//我们在监听得时候记得消除了监听得事件
//我们在用完这个傀儡记得消除
beforeDestroy(){
  this.$bus.$off('hello')
}

4. 组件跨级通信

外层组件通过provide传值,

给内层组件provide :{ name :"值"}

内层组件通过inject接收值 inject :["name"]

//祖先组件
//1
  provide(){
        return{ name :this.paramsOne}
  },
//2
 provide(){ name :"我是paramsOne"},
//孙子组件
inject:['name'],
    data(){
        return{
            name : this.name
        }
    }
}