vue3常用的组件的通信方式

news2025/1/19 15:05:05

一、Props

Props 是父组件向子组件传递数据的常用方式

在父组件模板里,通过在子组件标签上绑定属性来传递数据:

<template>
    <ChildComponent :message="parentMessage" />
</template>

子组件则通过 defineProps 接收:

import { defineComponent, defineProps } from 'vue';
export default defineComponent({
    props: defineProps({
        message: String
    }),
    setup(props) {
        // 打印接收到的消息
        console.log(props.message);
        return {};
    }
});

通过上述代码,父组件可以将 parentMessage 的值传递给子组件,子组件通过 defineProps 接收并使用。

二、Emits

Emits 用于子组件向父组件传递事件

子组件用 defineEmits 定义可触发的事件,通过 emit 函数触发,父组件用 @(v-on 语法糖)监听。

子组件代码如下:

import { defineComponent, defineEmits } from 'vue';
export default defineComponent({
    emits: defineEmits(['childEvent']),
    setup(props, { emit }) {
        const handleClick = () => {
            // 触发 childEvent 事件并传递数据
            emit('childEvent', 'Data from child');
        };
        return {
            handleClick
        };
    }
});

父组件监听代码如下:

<template>
    <ChildComponent @childEvent="handleChildEvent" />
</template>

三、Provide/Inject

Provide/Inject 用于跨多层组件的数据传递

祖先组件用 provide 提供数据,后代组件用 inject 获取。如果提供的是响应式数据(如 ref 或 reactive),后代获取的数据也是响应式的。

祖先组件:

import { defineComponent, provide } from 'vue';
import GrandchildComponent from './GrandchildComponent.vue';
export default defineComponent({
    setup() {
        const sharedData = 'This is shared data';
        // 提供 sharedData 数据
        provide('sharedData', sharedData);
        return {
            sharedData
        };
    },
    components: {
        GrandchildComponent
    }
});

后代组件:

import { defineComponent, inject } from 'vue';
export default defineComponent({
    setup() {
        // 获取 sharedData 数据
        const sharedData = inject('sharedData');
        console.log(sharedData);
        return {};
    }
});

四、Vuex(状态管理库)

Vuex 用于管理应用全局状态

先创建 store 存储状态、定义 mutations 修改状态等。组件通过 useStore 访问状态,也可以用 mapStatemapMutations 等辅助函数。

定义 store(store/index.js):

import { createStore } from 'vuex';
const store = createStore({
    state() {
        return {
            count: 0
        };
    },
    mutations: {
        increment(state) {
            // 状态中的 count 加 1
            state.count++;
        }
    });
export default store;

组件使用:

import { defineComponent } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
    setup() {
        const store = useStore();
        const count = computed(() => store.state.count);
        const increment = () => {
            // 调用 increment 方法修改状态
            store.commit('increment');
        };
        return {
            count,
            increment
        };
    }
});

五、Event Bus(自定义事件总线)

可以借助第三方库(如 mitt)创建事件总线来通信。一个组件发送事件,另一个接收,但可能会使代码维护性变差。

创建事件总线(event-bus.js):

import mitt from'mitt';
const emitter = mitt();
export default emitter;

组件 A 发送:

import emitter from './event-bus.js';
export default {
    setup() {
        const sendEvent = () => {
            // 发送自定义事件
            emitter.emit('customEvent', 'Data from component A');
        };
        return {
            sendEvent
        };
    }
};

组件 B 接收:

import emitter from './event-bus.js';
export default {
    setup() {
        emitter.on('customEvent', (data) => {
            // 接收自定义事件并打印数据
            console.log(data);
        });
        return {};
    }
};

六、Slots(插槽)

1. 默认插槽

默认插槽是父组件向子组件传递内容的基本方式

父组件在子组件标签内放内容,子组件用 <slot> 标签渲染。

父组件:

<template>
    <ChildComponent>
        <p>Content passed to child via default slot</p>
    </ChildComponent>
</template>

子组件:

<template>
    <div>
        <slot></slot>
    </div>
</template>

2. 具名插槽

具名插槽用于传递不同部分内容

父组件用 v-slot(或 # 语法糖)指定插槽名和内容,子组件用 name 属性区分插槽。

父组件:

<template>
    <ChildComponent>
        <template v-slot:header>
            <h1>Header content</h1>
        </template>
        <template v-slot:body>
            <p>Body content</p>
        </template>
    </ChildComponent>
</template>

子组件:

<template>
    <div>
        <slot name="header"></slot>
        <slot name="body"></slot>
    </div>
</template>

3. 作用域插槽

作用域插槽允许子组件向父组件传递数据,父组件自定义数据渲染方式

子组件:

<template>
    <slot :data="childData"></slot>
</template>

父组件:

<template>
    <ChildComponent>
        <template v-slot="slotProps">
            <p>{{slotProps.data}}</p>
        </template>
    </ChildComponent>
</template>

七、Composition API 共享状态

通过创建组合函数共享数据

组合函数返回响应式数据和操作数据的函数,多个组件可使用同一组合函数共享状态。

组合函数(useCounter.js):

import { ref } from 'vue';
export const useCounter = () => {
    const count = ref(0);
    const increment = () => {
        // 计数器加 1
        count.value++;
    };
    return {
        count,
        increment
    };
};

组件 A 使用:

import { defineComponent } from 'vue';
import { useCounter } from './useCounter.js';
export default defineComponent({
    setup() {
        const { count, increment } = useCounter();
        return {
            count,
            increment
        };
    }
});

同理组件 B 也可使用该组合函数来共享状态。

通过上述这些 Vue.js 中的组件通信和状态管理方式,我们可以根据不同的需求,灵活地构建出功能强大、结构清晰的 Vue.js 应用。希望这篇博客对你有所帮助,在实际开发中可以根据具体情况选择合适的方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2278963.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

广播网络实验

1 实验内容 1、构建星性拓扑下的广播网络,实现hub各端口的数据广播,验证网络的连通性并测试网络效率 2、构建环形拓扑网络,验证该拓扑下结点广播会产生数据包环路 2 实验流程与结果分析 2.1 实验环境 ubuntu、mininet、xterm、wireshark、iperf 2.2 实验方案与结果分析…

RustDesk ID更新脚本

RustDesk ID更新脚本 此PowerShell脚本自动更新RustDesk ID和密码&#xff0c;并将信息安全地存储在Bitwarden中。 特点 使用以下选项更新RustDesk ID&#xff1a; 使用系统主机名生成一个随机的9位数输入自定义值 为RustDesk生成新的随机密码将RustDesk ID和密码安全地存储…

JavaEE之常见的锁策略

前面我们学习过线程不安全问题&#xff0c;我们通过给代码加锁来解决线程不安全问题&#xff0c;在生活中我们也知道有很多种类型的锁&#xff0c;同时在代码的世界当中&#xff0c;也对应着很多类型的锁&#xff0c;今天我们对锁一探究竟&#xff01; 1. 常见的锁策略 注意: …

数字图像处理:实验二

任务一&#xff1a; 将不同像素&#xff08;32、64和256&#xff09;的原图像放大为像素大 小为1024*1024的图像&#xff08;图像自选&#xff09; 要求&#xff1a;1&#xff09;输出一幅图&#xff0c;该图包含六幅子图&#xff0c;第一排是原图&#xff0c;第 二排是对应放大…

WEB渗透技术研究与安全防御

目录 作品简介I IntroductionII 1 网络面临的主要威胁1 1.1 技术安全1 2 分析Web渗透技术2 2.1 Web渗透技术的概念2 2.2 Web漏洞产生的原因2 2.3 注入测试3 2.3.1 注入测试的攻击流程3 2.3.2 进行一次完整的Sql注入测试4 2.3.3 Cookie注入攻击11 3 安全防御方案设计…

使用 Thermal Desktop 进行航天器热分析

介绍 将航天器保持在运行温度下的轨道上是一个具有挑战性的问题。航天器需要处理太空非常寒冷的背景温度&#xff0c;同时还要管理来自内部组件、地球反照率和太阳辐射的高热负荷。航天器在轨道上可以进行的各种轨道机动使解决这个问题变得更加复杂。 Thermal Desktop 是一款…

乘联会:1月汽车零售预计175万辆 环比暴跌33.6%

快科技1月18日消息&#xff0c;据乘联会的初步推算&#xff0c;2025年1月狭义乘用车零售总市场规模预计将达到约175万辆左右。与去年同期相比&#xff0c;这一数据呈现了-14.6%的同比下降态势&#xff1b;而相较于上个月&#xff0c;则出现了-33.6%的环比暴跌情况。 为了更清晰…

SQL 递归 ---- WITH RECURSIVE 的用法

SQL 递归 ---- WITH RECURSIVE 的用法 开发中遇到了一个需求&#xff0c;传递一个父类id&#xff0c;获取父类的信息&#xff0c;同时获取其所有子类的信息。 首先想到的是通过程序中去递归查&#xff0c;但这种方法着实孬了一点&#xff0c;于是想&#xff0c;sql能不能递归查…

【机器学习实战入门项目】使用深度学习创建您自己的表情符号

深度学习项目入门——让你更接近数据科学的梦想 表情符号或头像是表示非语言暗示的方式。这些暗示已成为在线聊天、产品评论、品牌情感等的重要组成部分。这也促使数据科学领域越来越多的研究致力于表情驱动的故事讲述。 随着计算机视觉和深度学习的进步&#xff0c;现在可以…

windows 搭建flutter环境,开发windows程序

环境安装配置&#xff1a; 下载flutter sdk https://docs.flutter.dev/get-started/install/windows 下载到本地后&#xff0c;随便找个地方解压&#xff0c;然后配置下系统环境变量 编译windows程序本地需要安装vs2019或更新的开发环境 主要就这2步安装后就可以了&#xff0…

【Linux】15.Linux进程概念(4)

文章目录 程序地址空间前景回顾C语言空间布局图&#xff1a;代码1代码2代码3代码4代码5代码6代码7 程序地址空间前景回顾 历史核心问题&#xff1a; pid_t id fork(); if(id 0) else if(id>0) 为什么一个id可以放两个值呢&#xff1f;之前没有仔细讲。 C语言空间布局图&am…

一文读懂服务器的HBA卡

什么是 HBA 卡 HBA 卡&#xff0c;全称主机总线适配器&#xff08;Host Bus Adapter&#xff09; &#xff0c;是服务器与存储装置间的关键纽带&#xff0c;承担着输入 / 输出&#xff08;I/O&#xff09;处理及物理连接的重任。作为一种电路板或集成电路适配器&#xff0c;HBA…

oracle使用case when报错ORA-12704字符集不匹配原因分析及解决方法

问题概述 使用oracle的case when函数时&#xff0c;报错提示ORA-12704字符集不匹配&#xff0c;如下图&#xff0c;接下来分析报错原因并提出解决方法。 样例演示 现在有一个TESTTABLE表&#xff0c;本表包含的字段如下图所示&#xff0c;COL01字段是NVARCHAR2类型&#xff0…

Linux-----线程同步(条件变量)

目录 相关API restrict关键字 线程间条件切换函数 条件变量pthread_cond_t 案例 在前面的锁的基础上进一步提高线程同步效率&#xff0c;也就是两个线程只用锁去执行的话依然会存在资源竞争的情况&#xff0c;也就是抢锁&#xff0c;这里就需要在锁的这边加上限制&#xf…

每日进步一点点(网安)

今日练习题目是PHP反序列化&#xff0c;也学习一下说明是序列化和反序列化 1.PHP序列化 序列化是指将数据结构或对象转换为可传输或可储存的格式的过程。这通常需要将数据转换为字节流或者其他编码格式&#xff0c;以便在不同系统和应用程序之间进行传输或存储 在PHP中&…

Java-数据结构-二叉树习题(1)

对于二叉树的学习&#xff0c;主要的还是得多多练习~毕竟二叉树属于新的知识&#xff0c;并且也并不是线性结构&#xff0c;再加上经常使用递归的方法解决二叉树的问题&#xff0c;所以代码的具体流程还是无法看到的&#xff0c;只能通过画图想象&#xff0c;所以还是必须多加练…

(二)afsim第三方库编译(qt编译)

注意&#xff1a;源码编译的路径不能有中文否则报错&#xff0c;压缩包必须用官网下载的xz格式解压的才可以&#xff0c;否则sudo ./configure命令找不到 先编译openssl3.1.1软件包&#xff0c;否则编译的qt库将不支持network&#xff0c;相关库的编译(上文&#xff08;一&…

【QT用户登录与界面跳转】

【QT用户登录与界面跳转】 1.前言2. 项目设置3.设计登录界面3.1 login.pro参数3.2 界面设置3.2.1 登录界面3.2.2 串口主界面 4. 实现登录逻辑5.串口界面6.测试功能7.总结 1.前言 在Qt应用程序开发中&#xff0c;实现用户登录及界面跳转功能是构建交互式应用的重要步骤之一。下…

【docker踩坑记录】

docker踩坑记录 踩坑记录(持续更新中.......)docker images 权限问题 踩坑记录(持续更新中…) docker images 权限问题 permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.s…

搜维尔科技:Xsens人形机器人解决方案的优势

Xsens 致力于推动人形机器人技术的发展&#xff0c;塑造机器人与人类环境无缝融合的未来&#xff0c;通过创新精确和协作&#xff0c;协助生产和服务&#xff0c;改善人类生活和产业。 Xsens通过人形跟随捕捉详细的人体运动数据&#xff0c;使机器人能够学习类人的动作&#x…