用ChatGPT高效学习-Vue的组件通信方式有哪些？-人工智能-PHP中文网

用ChatGPT高效学习-Vue的组件通信方式有哪些？

王林

发布： 2023-04-12 11:43:02

转载

1135人浏览过

Vue 的组件通信方式有以下几种：

父子组件通信：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。

子父组件通信：子组件通过 $emit 触发事件向父组件传递数据，父组件通过 v-on 监听子组件事件并处理数据。

兄弟组件通信：可以通过一个共同的父组件作为中介，将数据通过 props 和事件分别传递给两个兄弟组件。

跨级组件通信：可以通过 provide 和 inject 来实现跨级组件通信，父组件通过 provide 提供数据，子孙组件通过 inject 注入数据。

事件总线：可以通过创建一个空的 Vue 实例作为事件总线，用于在任意组件之间传递事件和数据。

Vuex：Vuex 是 Vue 的状态管理库，可以用于管理全局状态和实现组件之间的通信。

需要根据具体的场景和需求选择合适的通信方式。

父子组件通信：

父组件：

<template>

<child-component :message="message" @update-message="updateMessage"></child-component>

</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello World'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>

登录后复制

子组件：

<template>

<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<button @click="updateMessage">Update Message</button>

</template>

<script>
export default {
props: {
message: String
},
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>

登录后复制

子父组件通信：

父组件：

<template>

<child-component @update-message="updateMessage"></child-component>
<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
data() {
return {
message: ''
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>

登录后复制

子组件：

<template>

<button @click="updateMessage">Update Message</button>

</template>

<script>
export default {
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>

登录后复制

兄弟组件通信：

父组件：

<template>

<child-component-1 :message="message" @update-message="updateMessage"></child-component-1>
<child-component-2 :message="message"></child-component-2>

</template>

<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

export default {
components: {
ChildComponent1,
ChildComponent2
},
data() {
return {
message: 'Hello World'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>

登录后复制

子组件1：

<template>

<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<button @click="updateMessage">Update Message</button>

</template>

<script>
export default {
props: {
message: String
},
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>

登录后复制

子组件2：

<template>

<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

</template>

<script>
export default {
props: {
message: String
}
}
</script>

登录后复制

跨级组件通信：

父组件：

<template>

<child-component></child-component>

</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
provide() {
return {
message: 'Hello World'
}
}
}
</script>

登录后复制

子组件：

<template>

<grandchild-component></grandchild-component>

</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
components: {
GrandchildComponent
}
}
</script>

登录后复制

孙子组件：

<template>

<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

</template>

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

登录后复制

事件总线：

<template>

<button @click="updateMessage">Update Message</button>

</template>

<script>
export default {
methods: {
updateMessage() {
EventBus.$emit('update-message', 'New Message');
}
}
}

const EventBus = new Vue();
</script>

登录后复制

Vuex：

Vuex 是 Vue 的状态管理库，可以用于管理全局状态和实现组件之间的通信。

以下是一个简单的示例：

<template>

<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<button @click="updateMessage">Update Message</button>

</template>

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

export default {
computed: {
...mapState(['message'])
},
methods: {
...mapMutations(['updateMessage'])
}
}
</script>

登录后复制

<template>

<p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

</template>

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

export default {
computed: {
...mapState(['message'])
}
}
</script>

登录后复制

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
message: 'Hello World'
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage;
}
}
});

登录后复制

在这个示例中，我们使用了 Vuex 来管理全局状态。在父组件和子组件中都使用了 mapState 来获取 message 状态，使用 mapMutations 来触发 updateMessage mutation 来更新 message 状态。在 Vuex 的 store 中定义了 message 状态和 updateMessage mutation 来更新 message 状态。

以上就是用ChatGPT高效学习-Vue的组件通信方式有哪些？的详细内容，更多请关注php中文网其它相关文章！