Vue中组件间的通信方式

一.父子组件通信--父给子传递数据

1.在父组件中给子组件绑定属性，在子组件中用props进行接收（最简单）。

父组件

<template>
  <div id="app">
    <school :msg="msg"/>
  </div>
</template>

<script>
import student from './components/student'
import school from './components/school'
export default {
  name: 'App',
  components: {
    school
  },
  data(){
    return {
        msg:'nihao'
    }
 }
}
</script>

子组件

<template>
   <div class="box">
        {{msg}}
   </div>
</template>

<script>
import {hunhe,hunhe2} from '../mixin'
export default {
    props:['msg'],
    name:'school',
    data(){
        return{
  
        }
    }

}
</script>

2.使用vuex，在state中存储变量，在mutations定义修改的方法

//没有模块化

//访问
this.$store.state.xxxx

computed(){
    // 借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    // 借助mapState生成计算属性，从state中读取数据（数组写法）(当方法名和state中的属性名相同时)
      ...mapState(['sum','school','subject'])
}

//修改
this.$store.commit('方法名',参数)

methods:{
        ...mapMutations['方法名']
        // 借助mapMutations生成对应的方法，方法中的回调用commit去联系mutations（对象写法）
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),

        // 借助mapMutations生成对应的方法，方法中的回调用commit去联系mutations（数组写法）
        // ...mapMutations(['JIA','JIAN']),
}

3.全局事件总线bus

在需要发送信息的一端绑定原生事件

<template>
  <div id="app">
      父组件 --{{msg}}
      <button @click="sendMsg">给子组件发信息</button>
      <myChild/>
  </div>
  
</template>

<script>
import myChild from './components/myChild'
export default {
  name:"App",
  components:{myChild},
  data(){
    return {
      msg:'nihao'
    }
  },
  methods:{
    sendMsg(){
      this.$bus.$emit('GOOD',this.msg)
    }
  }

}
</script>

<style>

</style>

子组件接受数据

<template>
  <div>
    子组件---{{ info }}
  </div>
</template>

<script>
export default {
    name:'myChild',
    data(){
        return {
            info:''
        }
    },
    mounted(){
        this.$bus.$on('GOOD',(msg)=>{
            this.info = msg
        })
    },
    beforeDestroy(){
        // 解绑
        this.$bus.$off()
    }


}
</script>

<style>

</style>

二.父子组件通信--子给父传递数据

1.在父组件中给子组件绑定函数，在子组件中用props接受。

父组件

<template>
  <div id="app">

    <!-- 通过父组件个子组件传递函数类型的props实现，子给父传递数据：子给父传递数据（第一种方法） -->
    <school :getSchoolName="getSchoolName" />
  </div>
</template>

<script>

import school from './components/school'
import student from './components/student'
export default {
  name: 'App',
  components: {
        school
  },
  data(){
    return{
      name:''
    }
  },
  methods:{
    getSchoolName(name){
      console.log('学校名称为：',name)
    }
  }
}
</script>

子组件

<template>
   <div class="box">
        <h1 >学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
      <button @click.once="sendSchoolName">把学校名给app</button>
   </div>
</template>

<script>
export default {
    props:['getSchoolName'],
    name:'school',
    data(){
        return{
          name:'上例',
          address:'beijing'
        
        }
    },
    methods:{
      sendSchoolName(){
        this.getSchoolName(this.name);
      }
    }

}
</script>

2.在父组件中给子组件绑定自定义事件，这样不用props接收，更加便捷。

父组件

<template>
  <div id="app">

    <!-- 通过父组件个子组件绑定一个自定义事件实现，子给父传递数据：子给父传递数据（第一种方法：使用v-on/@） -->
    <!-- 绑定事件在student的组件实例vc身上，通过vc实例调用 -->
    <!-- <student v-on:hander="demo"/> -->
    <student @hander="demo" @hander2="demo2"/>

    
    <!-- 通过父组件个子组件绑定一个自定义事件实现，子给父传递数据：子给父传递数据（第二种方法：使用ref） -->
    <!-- 拿到student组件的实例 this.$refs.student -->
    <student ref="student"/>
    {{name}}
  </div>
</template>

<script>
import student from './components/student'
export default {
  name: 'App',
  components: {
    student
  },
  data(){
    return{
      name:''
    }
  },
  methods:{
    demo(name,...params){
      console.log('学生的名字为：',name,params)
      // 将拿到的name,显示在app组件中
      this.name=name
    },
    demo2(){
      console.log('demo事件被触发了！')
    }
  },
  mounted(){

  },
  mounted(){
    // （第一种写法）拿到student组件的实例对象，当触发事件hander被触发后，执行函数demo（）这里的this指向student组件实例
    // 但是调用了method中的方法，又指向了app当前实例。
    this.$refs.student.$on('hander',this.demo)

    // （第二种写法）第二个参数写成箭头函数,this指向实例对象app
    this.$refs.student.$on('hander',(name,...params)=>{
      console.log(name,params)
    })
    // 只触发一次.$once
    // this.$refs.student.$once('hander',this.demo)

  }
}
</script>

子组件：触发 this.$emit('自定义事件名',参数)

<template>
   <div class="box">
        <h1>学生名称：{{name}}</h1>
        <h1>学生性别：{{age}}</h1>
        <h1>number加一：{{number}}</h1>
        <button @click="add">add++</button>
    <button @click="sendName">把学生的姓名传给app</button>
    <!-- 解绑hander事件 -->
    <button @click="unbind">解绑hander事件</button>
    <!-- 销毁student的组件实例vc，同样可以解绑在student组件vc上的自定义事件,但是一般事件时不会被销毁的（原生函数也不能调用？？why） -->
    <button @click="death">消除vc实例</button>
</div>
</template>

<script>
export default {
    name:'student',
    data(){
        return{
          name:'lilililili',
          age:'女',
          number:20     
        }
    },
    methods:{
      add(){
        console.log('我被触发了！')

        this.number++;
      },
      sendName(){
        // 通过this.$emit触发hander的自定义事件
        this.$emit('hander', this.name,555,666,999);
        // 第二个事件
        this.$emit('hander2')
      },
      unbind(){
        // 只适合解绑一个自定义事件
        // this.$off('hander')
        // 解绑多个事件
        // this.$off(['hander','hander2'])
        // 解绑student组件实例vc上所有自定义组件
        // this.off()
      },
      death(){
        // 销毁当前student组件的实例vc
        // 销毁后所有Student身上绑定的自定义事件全部不奏效。
        this.$destroy();
        // this.$destroy()方法会触发beforeDestroy,destroyed
      },
    }


}
</script>

3.使用vuex

4.使用全局事件总线bus，给需要发送数据的组件 this.$emit('唯一参数名'，参数)

  需要接收的组件的mounted函数中

this.$bus.$on('唯一参数名'，（params）=>{

        给接收到数据进行存储

        this .msg = params

} )

三.兄弟组件之间的传参

1.vuex。

2.使用全局事件总线。

---

在vue3中，引入了project，inject,这个适用于祖父孙以及后代组件之间的通信

provide('car',this.car)

 const car = inject('car')