首页 > 其他分享 >Vue组件通信方式详解(全面版)

Vue组件通信方式详解(全面版)

时间:2023-09-03 12:33:07浏览次数:45  
标签:Vue default 详解 export 组件 import message


Vue应用开发中,组件通信是一个重要的话题。不同的组件可能需要在不同的情况下进行数据传递和交互。Vue提供了多种方式来实现组件通信,每种方式都有其适用的场景。本文将详细介绍Vue中实现组件通信的各种方式,并为每种方式提供通俗易懂的代码示例。

公众号:Code程序人生,个人网站:https://creatorblog.cn

Props

Props是父组件向子组件传递数据的一种方式。子组件通过在声明中指定props属性来接收父组件传递的数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent message="Hello from parent!" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

自定义事件

子组件可以使用$emit触发一个自定义事件,父组件通过在子组件上使用v-on监听该事件并执行相应的方法。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message-sent="handleMessage" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      console.log(message); // Output: "Hello from child!"
    },
  },
};
</script>

事件总线(Event Bus)

事件总线是一个空的Vue实例,可以用于在任何组件间发布和订阅事件。

<!-- EventBus.js -->
import Vue from 'vue';
export const eventBus = new Vue();

<!-- FirstComponent.vue -->
<template>
  <button @click="sendMessage">Send Message to SecondComponent</button>
</template>

<script>
import { eventBus } from './EventBus.js';

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message-sent', 'Hello from first component!');
    },
  },
};
</script>

<!-- SecondComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { eventBus } from './EventBus.js';

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

Vuex

VuexVue的状态管理库,用于在不同组件间共享状态。

<!-- store/index.js -->
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

<!-- FirstComponent.vue -->
<template>
  <button @click="updateMessage">Update Message in SecondComponent</button>
</template>

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

export default {
  methods: {
    ...mapMutations(['updateMessage']),
    updateMessage() {
      this.updateMessage('Hello from first component!');
    },
  },
};
</script>

<!-- SecondComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

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

$parent 和 $children

Vue提供了$parent$children属性来访问父组件和子组件的实例。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$parent.message = 'Hello from child!';
    },
  },
};
</script>

依赖注入

依赖注入是一种高级的通信方式,适用于祖先组件向后代组件传递数据,而不需要显式地通过props传递。

<!-- AncestorComponent.vue -->
<template>
  <DescendantComponent />
</template>

<script>
import { provide } from 'vue';
import DescendantComponent from './DescendantComponent.vue';

export default {
  components: {
    DescendantComponent,
  },
  setup() {
    provide('message', 'Hello from ancestor!');
  },
};
</script>

<!-- DescendantComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message,
    };
  },
};
</script>

$attrs 和 $listeners

$attrs$listeners 允许将父组件中非 prop 特性和事件传递给子组件,用于更灵活的组件封装。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent title="Hello" @custom-event="handleEvent" />
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="$emit('custom-event', 'Custom Event')">Click</button>
  </div>
</template>

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

插槽(Slots)

插槽允许父组件向子组件传递内容,而不仅仅是数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <p>Slot content from parent</p>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

$refs

$refs 允许父组件访问子组件的实例,从而进行直接通信。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="sendMessageToChild">Send Message to Child</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    sendMessageToChild() {
      this.$refs.childRef.receiveMessage('Hello from parent!');
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

localStorage或sessionStorage

浏览器缓存在一定程序上也可以帮助我们实现组件通信,甚至跨页面、跨窗口通信,但是在Vue项目中有很多更优秀的通信方式,不是很建议使用localStoragesessionStorage来实现。

// 在一个页面中存储数据
localStorage.setItem('message', 'Hello from localStorage');

// 在另一个页面中获取数据
const message = localStorage.getItem('message');
console.log(message); // "Hello from localStorage"

总结

组件通信是我们日常开发中最常见的功能,可以这样说,有组件的地方就有组件通信的需求,而现在所有框架都朝着组件化、工程化的方向发展,所以组件通信是我们必须掌握的。

上述内容详细介绍了Vue中实现组件通信的多种方式,提供了基本的代码示例。它们有各自的使用场景,大家可以根据不同的场景和需求,选择合适的通信方式可以让你的Vue应用更加高效和可维护。


标签:Vue,default,详解,export,组件,import,message
From: https://blog.51cto.com/u_15295488/7339441

相关文章

  • Angular 实现分页器组件
    很感谢 angular实现简单的pagination分页组件-Amor丶Diamond-博客园(cnblogs.com) ,我根据这位博主代码做了修改,增加了跳转和每页行数功能.先看图:  //可配置项//totalItem数据总条数//maxSize:最多显示几页//pageSizes:行/页//moreBtn:是否显示......
  • 有关Vue-Cli5.X工程中ESLint组件命名检查问题解决
    个人开发环境简介,工具用的VisualStudioCode,因为每个人的开发环境不同,不可能所有解决方案通用,防止踩坑。PSF:\VueWorkSpace\vue_router_test>node-vv16.12.0PSF:\VueWorkSpace\vue_router_test>npm-v8.1.0PSF:\VueWorkSpace\vue_router_test>npmeslint-v8.1.0......
  • Java常用四大线程池用法以及ThreadPoolExecutor详解(转)
    为什么用线程池?1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处-理效率2.线程并发数量过多,抢占系统资源从而导致阻塞3.对线程进行一些简单的管理在Java中,线程池的概念是Executor这个接口,具体实现为ThreadPoolExecutor类,学习Java中的线程池,就可以......
  • vue3中用户登陆会把用户跳转到登录页面,如何让用户登录完成后,跳回原来的页面上
    本地存储在Vue3中,你可以使用VueRouter和sessionStorage或localStorage来实现用户登录后跳回原来的页面。以下是一种常见的实现方式:在用户登录之前,记录当前页面的路由路径:在需要登录的页面组件中,在用户点击登录前,使用 this.$route.path 获取当前页面的路由路径,并将其存......
  • vue前端工程化基础
    1前端工程化1.1前端工程化介绍我们目前的前端开发中,当我们需要使用一些资源时,例如:vue.js,和axios.js文件,都是直接再工程中导入的,如下图所示:但是上述开发模式存在如下问题:每次开发都是从零开始,比较麻烦多个页面中的组件共用性不好js、图片等资源没有规范化的存储目录,没有统......
  • 【性能测试】JVM自带内存分析工具详解
    一、Jstat使用(重点)Jstat命令是jvm调优非常重要,且非常有效的命令。具体用法如下:1.垃圾回收统计jstat-gcjstat-gc进程id这个命令非常常用,在线上有问题的时候,可以通过这个命令来分析问题。下面我们来测试一下,启动一个项目,然后在终端驶入jstat-gc进程id,得到如下结果上面......
  • 深入理解 Vuex:Vue 状态管理的核心
    在Vue.js应用程序中,管理组件之间的状态是一项关键任务。为了有效地管理和共享应用程序的数据,Vue.js开发团队开发了一个强大的状态管理库,称为Vuex。本文将深入探讨Vuex的核心概念、用法和最佳实践,帮助您更好地理解和利用这一工具。什么是Vuex?Vuex是一个专为Vue.js设计的状态管理库,......
  • Crontab命令详解
    Linux系统则是由cron(crond)这个系统服务来控制的。Linux系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的。另外,由于使用者自己也可以设置计划任务,所以,Linux系统也提供了使用者控制计划任务的命令:crontab命令。一、crond简介crond 是linux下用来周期......
  • vue 中的html和v-html区别
    <template> <div>2222</div> <p>{{message}}</p> <p>{{rawhtml}}</p> <pv-html="rawhtml"></p></template><script> exportdefault{     data(){         return{             messag......
  • 前端Vue仿企查查天眼查高管信息列表组件
    ​随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之......