vue组件通信方式汇总

目录

一、父子组件的通信   props / $emit

1.父组件向子组件传值

2、子组件向父组件传递信息

二、eventBus 事件总线  （$emit / $on）

三、其他方法（ref/$refs、$parent/$child）

四、总结

---

一、父子组件的通信   props / $emit

父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

1.父组件向子组件传值

定义： props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。

注意： props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式；

           同时，在接收变量时也可以对数据做一些限制

  // 父组件模板
  

    
    
  

  // 子组件模板
  

// 父组件
const app = new Vue({
      el: "#app",
      data: {
        message:'你好呀',
        movies:['海王','海贼王','海尔兄弟']
      },
      // 注册组件
      components:{
        cpn
      }
    });

// 子组件
const cpn =  {
      template:"#cpn",
      // 1、普通接收
      // props: ['cmovies','cmessage'],
      // 2、以对象形式接收
      props: {
        cmessage: {
          // 2.1类型
          type:String,
          //2.2默认值
          default:'aaaa',
          //2.3 true表示必须传
          required: true
        },
        cmovies:{
          type: Array,
          // 类型是对象或者数组时,default必须是一个函数
          default(){
            return []
          }  
        }
      }
    }

2、子组件向父组件传递信息

定义： $emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

// 2.父组件
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊",
      },
      components: {
        cpn
      },
      methods: {
        cpnClick(item){
          console.log('cpnClick');  //验证监听
          console.log(item);
        }
      }
    });

// 1.子组件
    const cpn = {
      template: '#cpn',
      data(){
        return {
          categories: [
            {id: 'aaa',name: '热门推荐'},
            {id: 'bbb',name: '手机数码'},
            {id: 'ccc',name: '家用家电'},
            {id: 'ddd',name: '数码办公'},
            
          ]   //分类
        }
      },
      methods: {
        btnClick(item){
          // console.log(item);
          // 将点击时传递过来的item传给父组件
          this.$emit('itemclick',item)    //发射事件  自定义事件
        }
      }
    }

二、eventBus 事件总线  （$emit / $on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信

使用步骤：1、创建事件中心(事件中心本质上就是一个vue实例)

const EventBus = new Vue()

 2、创建两个组件（此处以兄弟组件为例）

// 父组件


//子组件一


//子组件二

// 2.父组件
    const app = new Vue({
      el: "#app",
      data: {
        
      },
      components: {
        firstCom, secondCom
      }
    });

// 1.子组件一
    const firstCom= {
      template: '#firstCom',
      data(){
        return {
          num:0
        }
      },
      methods: {
        add(){
          EventBus.$emit('addition', {
            num:this.num++
          })
        }
      }
    }

//2.子组件二
    const secondCom= { 
      template: '#secondCom',
      data(){
        return {
          count: 0
        }
      },
     mounted() {
        EventBus.$on('addition', param => {
        this.count = this.count + param.num;
        })
      } 
    }

三、其他方法（ref/$refs、$parent/$child）

ref： 这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

$parent: 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）

$child: 使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。

四、总结

（1）父子组件间通信

• 子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
• 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。

（2）兄弟组件间通信

• 使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
• 通过 $parent/$refs 来获取到兄弟组件，也可以进行通信。

（3）任意组件之间

• 使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

（4）vuex

      如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。