小柒

www.xiaoqi.cn

0%

Vue中组件通信

发表于 分类于
  • 父子组件之间通信
  • 兄弟组件之间的通信
  • 祖孙与后代组件之间的通信
  • 非关系组件间的通信

整理vue中8种常规的通信方案

  1. 通过 props 传递
  2. 通过 $emit 触发自定义事件
  3. 使用 ref
  4. EventBus
  5. $parent 或$root
  6. attrs 与 listeners
  7. Provide 与 Inject
  8. Vuex

组件通信方案：

  • 通过props传递
  • 通过$emit触发自定义事件
  • 使用ref
  • EventBus
  • $parent或$root
  • attrs与listeners
  • Provide与inject
  • Vuex

props传递数据

  • 适用场景：父组件传递数据给子组件
  • 子组件设置props属性，定义接收父组件传递过来的参数
  • 父组件在使用子组件标签中通过字面量来传递值

Children.vue

1
2
3
4
5
6
7
8
9
10
props:{
    //字符串形式
    name:String//接收的类型参数
    //对象形式
    age:{
        type:Number,//接收的类型为数值
        default:18;//默认值为18
        require:true;//age属性必须传递
    }
}

Father.vue

1
<Children name='jack' age=18/>

$emit触发自定义事件

  • 适用场景：子组件传递数据给父组件
  • 子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
  • 父组件绑定监听器获取子组件传递过来的参数
  • 与组件和 prop 一样，事件名提供了自动的大小写转换。如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。

Children.vue

methods中

1
this.$emit('add',good)

Father.vue

template中：

1
<Children @add="cartAdd($event)"

ref

父组件在使用子组件的时候设置ref

父组件通过这只子组件ref来获取数据

父组件

1
2
<Children ref='foo'/>
    this.$refs.foo//获取子组件实例，通过子组件实例我们可以拿到对应数据

EventBus

  • 使用场景：兄弟组件传值
  • 创建一个中央事件总线EventBus
  • 兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
  • 另一个兄弟组件通过$on监听自定义事件

Bus.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Bus{
    constructor(){
        this.events={};
    }
    on(event,fn){
        this.events[event]=this.events[event]||[];
        this.events[event].push(fn)
        
    }
    emit(event,data){
        if(this.events[event]){
            this.events[event].forEach(cb=>{
                cb(data)
            })
        }
        
    }
    off(event,fn){
        if(this.events[event]){
            for(let i=0;i<this.events[event].length;i++){
                if(this.events[event][i]===fn){
                    this.events[event].splice(i,1);
                    break;
                }
            }
        }
    }
}

在入口中执行挂载

1
2
3
4
5
6
7
8
9
10
11
//main.js
import {createApp} from 'vue'
import App from './App.vue'
//引入事件类
import EventBus from 'lib/Bus.js'
const $bus=new Bus()
//挂载
//1使用provide
app.provide('$bus',$bus);
//2 挂载到this上
app.config.globalProperties.$bus=$bus

在组件中引入并使用

1
2
3
4
5
export default{
    created(){
        this.$bus.emit('ButtonCreated')
    }
}

在setup中使用

setup中无法访问到应用实例的this,所以用provide/inject

1
2
3
4
5
6
7
8
import {inject} from 'vue'
export default {
    setup(){
        const $bus=inject('$bus')
        $bus.emit('ButtonSetup')
    }
}

$parent或$root

通过共同父辈$parent或者$root搭建通信桥梁

兄弟组件

this.$parent.on(‘add’,this.add);

另一个兄弟组件

this.$parent.emit(‘add’)

$attrs 与$ listeners

  • 适用场景：祖先传递数据给子孙
  • 设置批量向下传属性$attrs和 $listeners
  • 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
  • 可以通过 v-bind="$attrs" 传⼊内部组件

在vue2.4中，为了解决该需求，引入了$attrs和$listeners，新增了inheritAttrs选项。我们只需要在B组件中对引入的C组件增加下面两个属性即可绑定所有的属性和事件。

1
2
<C v-bind="$attrs" v-on="$listeners"></C>

A组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div>
  <h2>组件A 数据项:{{myData}}</h2>
  <B @changeMyData="changeMyData" :myData="myData"></B>
</div>
</template>
<script>
import B from "./B";
export default {
  data() {
    return {
      myData: "100"
    };
  },
  components: { B },
  methods: {
    changeMyData(val) {
      this.myData = val;
    }
  }
};
</script>

B组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>
    <h3>组件B</h3>
    <C v-bind="$attrs" v-on="$listeners"></C>
  </div>
</template>
<script>
import C from "./C";
export default {
  components: { C },
};
</script>


C组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
    <h5>组件C</h5>
    <input v-model="myc" @input="hInput" />
  </div>
</template>
<script>
export default {
  props: { myData: { String } },
  created() {
    this.myc = this.myData;  // 在组件A中传递过来的属性
    console.info(this.$attrs, this.$listeners);
  },
  methods: {
    hInput() {
      this.$emit("changeMyData", this.myc); // // 在组件A中传递过来的事件
    }
  }
};
</script>


参考：https://juejin.cn/post/6844903828098138120

provide与inject

在祖先组件定义provide属性，并返回传递的值

在后代组件通过inject接收组件传递过来的值

祖先组件：

1
2
3
4
5
6
provide(){
	return {
        foo:'foo'

	}
}

后代组件：

1
inject:['foo'];//获取到祖先组件传递过来的值

具体：https://v3.cn.vuejs.org/guide/component-provide-inject.html#%E5%A4%84%E7%90%86%E5%93%8D%E5%BA%94%E6%80%A7

Vuex

  • 适用场景: 复杂关系的组件数据传递
  • Vuex作用相当于一个用来存储共享变量的容器
  • state用来存放共享变量的地方
  • getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
  • mutations用来存放修改state的方法。
  • actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

#小结

  • 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
  • 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
  • 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
  • 复杂关系的组件数据传递可以通过vuex存放共享的变量