Vue 组件通信-JXin的博客

父子组件通信
跨组件通信

Vue组件通信包括 父子组件通信 和 跨组件通信

父子组件通信

props

最常见的通信方式是通过 props 将数据从父组件传递到子组件。

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

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

attribute

attribute 指的是父组件有传递，但是没有在子组件中声明的数据（style 和 class除外），例如父组件中传递了msg、data-a两个数据，但是子组件的props中只声明了msg：

<!-- 父组件 -->
<ChildComponent msg="Welcome to Your Vue.js App" data-a="10" />


<!-- 子组件 -->
<template>
  <div>子组件</div>
</template>

<script>
export default {
  name: "childrenComponent",
  props: {
    msg: String,
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这些数据可以通过 this.$attrs 获取

attribute

提示

attribute 会挂载到html元素上，如果不需要可以通过 inheritAttrs：false 配置禁用

inheritAttrs: false

$emit

子组件可以通过 $emit 触发事件将数据传递给父组件。

<!-- 父组件 -->
<template>
  <ChildComponent @update="handleUpdate" />
</template>

<script>
export default {
  methods: {
    handleUpdate(data) {
      console.log('来自子组件的数据:', data);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="sendUpdate">点击我</button>
</template>

<script>
export default {
  methods: {
    sendUpdate() {
      this.$emit('update', '来自子组件的消息');
    }
  }
};
</script>

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
29

$parent 和 $children

组件实例的 $parent 和 $children 属性允许你在组件之间直接访问父组件或子组件。这些属性通常不推荐用于复杂的组件通信，因为它们会导致紧耦合和代码不易维护，但在某些简单的场景下可以使用。

父组件访问子组件

<template>
  <div>
    <ChildComponent v-for="n in 3" :key="n" ref="children" :index="n" />
    <button @click="callChildMethods">调用所有子组件的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethods() {
      this.$children.forEach(child => {
        child.childMethod();
      });
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

子组件访问父组件

<!-- 子组件 -->
<template>
  <button @click="callParentMethod">调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      console.log('父组件的方法被调用了');
    }
  }
};
</script>

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
29
30
31

ref

ref 属性允许你在父组件中直接引用子组件实例或 DOM 元素。这是与 $parent 和 $children 类似的一种直接访问方法，但更具可控性。

<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
  <button @click="callChild">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>子组件内容</div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件的方法被调用了');
    }
  }
};
</script>

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
29
30

native修饰符

在注册事件时，父组件可以通过native修饰符，将事件注册到子组件的根元素上，例如我们给子组件绑定一个click事件，实际子组件里面并没有使用$emit去触发这个事件，所以不管我们怎么点击都是没有效果的，但是如果加上native修饰符，这时候这个click就不是自定义事件了，而是会直接放在根元素上

$listeners

子组件可以通过$listeners获取父组件传递过来的所有事件处理函数，例如我们刚刚通过native给子组件绑定了一个click事件，我们可以使用$listeners获取并触发

mounted() {
	console.log('this.$listeners: ', this.$listeners);
	this.$listeners.click && this.$listeners.click()
}

1
2
3
4

v-model 和 .sync

可以看看这篇文章vue中的v-model

跨组件通信

Vuex

当需要在多个组件之间共享状态时，可以使用Vuex来进行组件间通信。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: '来自 Vuex 的消息'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    setMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- 组件 -->
<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">更新消息</button>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['setMessage']),
    updateMessage() {
      this.setMessage('来自组件的消息');
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Provide/Inject

当需要在更深层次的组件中传递数据时，可以使用 provide/inject。

<!-- 祖组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: '来自祖组件的消息'
    };
  }
};
</script>

<!-- 孙组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

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

事件总线（Event Bus）

事件总线是一种发布/订阅模式，用于在不相关的组件之间进行通信。虽然 Vue.js 2.x 中比较流行，但在 Vue 3 中，推荐使用更为现代的状态管理解决方案（如 Vuex 或 Composition API）。

例如：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

1
2
3

<!-- 组件 A -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { EventBus } from './event-bus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', '来自组件 A 的消息');
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- 组件 B -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { EventBus } from './event-bus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21