Vue之组件通信方法汇总

港控/mmm° 2022-12-02 13:40 153阅读 0赞

### 文章目录 ###

*   *  props
     *  \\$emit/\\$on
     *  \\$root/\\$parent
     *  /\\$children
     *  $refs
     *  \\$attrs/\\$listeners
     *  event bus
     *  vuex
     *  provide/inject

## props ##

父给子传值

// child
    props: {  msg: String }
    // parent
    <Child msg="hello child"/>

## $emit/$on ##

子给父传值

// child
    this.$emit('toPar', msg)
    // parent
    <Child @toPar="getSon($event)"></Child>

## $root/$parent ##

兄弟组件之间通信可通过共同祖辈搭桥，$parent或$root。

// brother1
    this.$parent.$emit('foo', data)
    // brother2
    this.$parent.$on('foo', data=>console.log(data))

## /$children ##

⽗组件可以通过$children访问⼦组件实现⽗⼦通信。

this.$children获取当前组件的所有子组件对象。通过下标访问对应的具体组件。

注意：$children属性是不保证子组件的顺序的，因为$children是根据你页面加载组件的顺序去确定子组件在 $children数组中的顺序。页面销毁，子组件顺序会重新排序。不安全。

// parent
    this.$children[0].xx = 'xxx'

## $refs ##

父组件访问命名子组件数据

// parent
    <Child ref="son"/>
    
    this.$refs.son.xx = 'xxx'

## $attrs/$listeners ##

包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当⼀个组件没有声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 ( class 和 style 除外)，并且可以通过 vbind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。

// parent
    <Child foo="foo"/>
    // child：并未在props中声明foo
    <p>{ { $attrs.foo}}</p>
    
    //爷爷定义孙子用
    // 爷爷给孙子隔代传值
    <Child msg="foo" @some-method="onSomeEvent"></Child>
    onSomeEvent(e){ 
    	//e为孙子的传值
    }
    // 儿子只做展开,起一个载体的作用
    <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
    // 孙子使⽤
    <div @click="$emit('some-method','data传值给爷爷')">
     { { msg}}
    </div>

## event bus ##

任意两个组件之间传值

// Bus：事件派发、监听和回调管理
    class Bus { 
    	constructor(){ 
    		this.callbacks = { }
    	}
    	//发布
    	$emit(name, args){ 
    		if(this.callbacks[name]){ 
    			this.callbacks[name].forEach(cb => cb(args))
    		}
    	}
    	//接收
    	$on(name, fn){ 
    		this.callbacks[name] = this.callbacks[name] || []
    		this.callbacks[name].push(fn)
    	}
    }
    // main.js
    Vue.prototype.$bus = new Bus()

项目中通常⽤Vue代替Bus，因为Vue已经实现了$on和$emit

// main.js
    Vue.prototype.$bus = new Vue()
    // child1
    this.$bus.$emit('foo',data)
    // child2
    this.$bus.$on('foo', data=>console.log(data))

## vuex ##

任意两个组件之间传值  
创建唯⼀的全局数据管理者store，通过它管理数据并通知组件状态变更  
[vuex详细使用][vuex]

## provide/inject ##

跨组件传值，数据的流只能是向下传递，即祖先和后代之间传值

// 祖先，注入依赖
    provide() { 
    	return { foo: 'foo'}
    }
    // 后代使用
    inject: ['foo']

[vuex]: https://blog.csdn.net/weixin_40970987/article/details/81909531