当前位置: 首页 > news >正文

第Ⅷ章-Ⅱ 组合式API使用

第Ⅷ章-Ⅱ 组合式API使用

  • provide与inject的使用
  • vue 生命周期的用法
  • 编程式路由的使用
  • vuex的使用
  • 获取DOM的使用
  • setup语法糖
    • setup语法糖的基本结构
    • 响应数据的使用
    • 其它语法的使用
    • 引入组件的使用
  • 父组件传值的使用
    • defineProps 父传子
    • defineEmits 子传父

provide与inject的使用

provide 与 inject 是 Vue 3 中用于跨组件树传递数据的 API,适合解决深层嵌套组件的通信问题。

  • provide:父组件提供数据。
  • inject:子组件接收数据。
<!-- src/App.vue -->
<template><div><ProviderComponent /></div>
</template><script setup>
import ProviderComponent from './components/ProviderComponent.vue';
</script>
<!-- src/components/ProviderComponent.vue -->
<template><div><h1>Provider Component</h1><ChildComponent /></div>
</template><script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';const providedData = 'Hello from Provider!';
provide('message', providedData);
</script>
<!-- src/components/ChildComponent.vue -->
<template><div><h2>Child Component</h2><p>{{ message }}</p></div>
</template><script setup>
import { inject } from 'vue';const message = inject<string>('message', 'Default Message');
</script>

vue 生命周期的用法

Vue 3 引入了组合式 API,使得生命周期钩子以函数形式使用,增加了灵活性。

<template><div>{{ message }}</div>
</template><script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';const message = ref('Hello, Vue 3!');onMounted(() => {console.log('Component is mounted');message.value = 'Component Mounted';
});onBeforeUnmount(() => {console.log('Component is about to unmount');
});
</script>

编程式路由的使用

Vue Router 支持编程式路由跳转,可以使用 router.push 和 router.replace。

<!-- src/components/NavigationComponent.vue -->
<template><div><button @click="goToHome">Go to Home</button><button @click="replaceWithAbout">Replace with About</button><button @click="goBack">Go Back</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const goToHome = () => {router.push('/home');
};const replaceWithAbout = () => {router.replace('/about');
};const goBack = () => {router.go(-1);
};
</script>

vuex的使用

Vuex 是 Vue 官方的状态管理库,通常使用 createStore 创建全局 store。

// src/store/index.ts
import { createStore } from 'vuex';interface State {count: number;
}const store = createStore<State>({state: {count: 0},mutations: {increment(state) {state.count += 1;},decrement(state) {state.count -= 1;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {doubleCount(state) {return state.count * 2;}}
});export default store;

在组件中使用 Vuex 状态和方法

<!-- src/components/CounterComponent.vue -->
<template><div><h2>Counter Example</h2><p>Count: {{ count }}</p><p>Double Count (getter): {{ doubleCount }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button><button @click="incrementAsync">Increment Async</button></div>
</template><script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);
const increment = () => store.commit('increment');
const decrement = () => store.commit('decrement');
const incrementAsync = () => store.dispatch('incrementAsync');
</script>

获取DOM的使用

在组合式 API 中可以使用 ref 和 onMounted 钩子来访问 DOM 元素。

<template><div><input type="text" ref="inputElement" placeholder="Type something..." /><button @click="focusInput">Focus Input</button></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue';const inputElement = ref<HTMLInputElement | null>(null);const focusInput = () => {inputElement.value?.focus();
};onMounted(() => {console.log('Component Mounted and DOM is ready');
});
</script>

setup语法糖

setup 语法糖 在 Vue 3.3 中引入,它简化了 setup 函数的使用,使得代码更加简洁易读。

setup语法糖的基本结构

<template><div>{{ message }}</div><button @click="increment">Increment: {{ count }}</button>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello, Vue 3!');
const count = ref(0);const increment = () => {count.value++;
};
</script>

响应数据的使用

  • ref:创建单一响应式值。
  • reactive:创建响应式对象。
  • toRefs:将 reactive 对象转换为 ref 对象。
<template><div><p>{{ message }}</p><p>Counter: {{ count }}</p></div>
</template><script setup>
import { ref, reactive, toRefs } from 'vue';const message = ref('Hello, Vue 3!');
const state = reactive({ count: 0 });const { count } = toRefs(state);
</script>

其它语法的使用

  • computed:创建计算属性。
  • watch:观察响应式数据的变化并执行副作用。
<template><div><p>Double Count: {{ doubleCount }}</p><input v-model="name" placeholder="Name" /><p>{{ name }}</p></div>
</template><script setup>
import { ref, computed, watch } from 'vue';const count = ref(2);
const doubleCount = computed(() => count.value * 2);const name = ref('Alice');
watch(name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});
</script>

引入组件的使用

<!-- src/App.vue -->
<template><CounterComponent />
</template><script setup>
import CounterComponent from './components/CounterComponent.vue';
</script>

父组件传值的使用

defineProps 父传子

<!-- src/components/ChildComponent.vue -->
<template><p>{{ message }}</p>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({message: String
});
</script>
<!-- src/App.vue -->
<template><ChildComponent message="Hello, Child!" />
</template><script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

defineEmits 子传父

<!-- src/components/ChildComponent.vue -->
<template><button @click="sendMessage">Send Message to Parent</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['message']);const sendMessage = () => {emit('message', 'Hello from Child Component!');
};
</script>
<!-- src/App.vue -->
<template><ChildComponent @message="handleMessage" /><p>{{ parentMessage }}</p>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';const parentMessage = ref('');const handleMessage = (msg: string) => {parentMessage.value = msg;
};
</script>

相关文章:

第Ⅷ章-Ⅱ 组合式API使用

第Ⅷ章-Ⅱ 组合式API使用 provide与inject的使用vue 生命周期的用法编程式路由的使用vuex的使用获取DOM的使用setup语法糖setup语法糖的基本结构响应数据的使用其它语法的使用引入组件的使用 父组件传值的使用defineProps 父传子defineEmits 子传父 provide与inject的使用 pro…...

stable-diffusion-webui配置

源码地址 https://github.com/AUTOMATIC1111/stable-diffusion-webui.git报错Fresh install fail to load AttributeError: NoneType object has no attribute _id pydantic降级 pip uninstall pydantic pip install pydantic1.10.11记得要把clip-vit-large-patch14放在opena…...

1+X电子商务数据采集渠道及工具选择(二)||电商数据采集API接口

电商数据采集API 接口 ◆适用范围 淘宝&#xff1a;可以采集到所属淘宝、天猫店铺的流量、销售、产品、运营相关数据;需要采集行业市场数据,则需要选择市场行情版。 京东&#xff1a;采集京东等其他平台店铺数据 jd.item_get 公共参数 名称类型必须描述keyString是调用key&…...

apinto OpenAPI

OpenApi 上游 查询列表 查询详情 新增 { "name": "jg_upstream", "driver": "http", "description": "通过postman添加上游", "scheme": "HTTPS", "retry":"1", "…...

XYCTF - web

目录 warm up ezMake ezhttp ezmd5 牢牢记住&#xff0c;逝者为大 ezPOP 我是一个复读机 ezSerialize 第一关 第二关 第三关 第一种方法&#xff1a; 第二种方法&#xff1a; ez?Make 方法一&#xff1a;利用反弹shell 方法二&#xff1a;通过进制编码绕过 ε…...

学习方法的重要性

原贴&#xff1a;https://www.cnblogs.com/feily/p/13999204.html 原贴&#xff1a;https://36kr.com/p/1236733055209095 1、 “一万小时定律”的正确和误区 正确&#xff1a; 天才和大师的非凡&#xff0c;不是真的天资超人一等&#xff0c;而是付出了持续不断的努力&…...

把现有的 Jenkins 容器推送到一个新的镜像标签,并且重新启动新的容器

要把现有的 Jenkins 容器推送到一个新的镜像标签&#xff0c;并且重新启动新的容器&#xff0c;你可以按照以下步骤操作&#xff1a; 停止当前正在运行的 Jenkins 容器&#xff08;如果你不想在操作时中断服务&#xff0c;可以跳过此步骤&#xff0c;直接进行下一步&#xff09…...

难以重现的 Bug如何处理

对很多测试人员&#xff08;尤其是对新手来说&#xff09;在工作过程中最不愿遇到的一件事情就是&#xff1a;在测试过 程中发现了一个问题&#xff0c;觉得是 bug&#xff0c;再试的时候又正常了。 碰到这样的事情&#xff0c;职业素养和测试人员长期养成的死磕的习性会让她…...

我与足球的故事 | 10年的热爱 | 伤病 | 悔恨 | 放弃 or 继续 | 小学生的碎碎念罢了

今天不分享技术博客&#xff0c;今天不知道为什么就是想写我和足球的故事&#xff08;手术完两个礼拜&#xff0c;手还是很疼那个&#xff0c;就连打字都费劲&#xff09;&#xff0c;上面两张图是我最喜欢的两个球星&#xff0c;当然因为之前特别喜欢巴萨&#xff0c;也特别喜…...

js图片回显的方法

直接上代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body>// HTML部分<input type"file" id"fileInput"><button onclick"show…...

Java中的maven的安装和配置

maven的作用 依赖管理 方便快捷的管理项目依赖的资源&#xff0c;避免版本冲突问题 统一项目管理 提供标准&#xff0c;统一的项目结构 项目构建 标准跨平台&#xff08;Linux、windows、MacOS&#xff09;的自动化项目构建方式 maven的安装和配置 在maven官网下载maven Ma…...

轴承制造企业“数智化”突破口

轴承是当代机械设备中一种重要零部件。它的主要功能是支撑机械旋转体&#xff0c;降低其运动过程中的摩擦系数&#xff0c;并保证其回转精度。轴承是工业核心基础零部件&#xff0c;对国民经济发展和国防建设起着重要的支撑作用。 轴承企业普遍采用以销定产的经营模式&#xf…...

UIButton案例之添加动画

需求 基于上一节代码进行精简&#xff0c;降低了冗余性。添加动画&#xff0c;使得坐标变化自然&#xff0c;同时使用了bounds属性和center属性&#xff0c;使得UIView变化以中心点为基准。 此外&#xff0c;使用两种方式添加动画&#xff1a;1.原始方式。 2.block方式。 代码…...

C#链接数据库、操作sql、选择串口

// 公共增删方法 using MySql.Data.MySqlClient; using System.Data; namespace ****** {public class MySQLHelper{private MySqlConnection conn null;private MySqlCommand comm null;private MySqlDataReader reader null;/// <summary>/// 构造方法里建议连…...

本地搭建各大直播平台录屏服务结合内网穿透工具实现远程管理录屏任务

文章目录 1. Bililive-go与套件下载1.1 获取ffmpeg1.2 获取Bililive-go1.3 配置套件 2. 本地运行测试3. 录屏设置演示4. 内网穿透工具下载安装5. 配置Bililive-go公网地址6. 配置固定公网地址 本文主要介绍如何在Windows系统电脑本地部署直播录屏利器Bililive-go&#xff0c;并…...

macos使用yarn创建vite时出现Usage Error: The nearest package directory问题

步骤是macos上使用了yarn create vite在window上是直接可以使用了yarn但是在macos上就出现报错 我们仔细看&#xff0c;它说的If /Users/chentianyu isnt intended to be a project, remove any yarn.lock and/or package.json file there.说是要我们清除yarn.lock和package.js…...

【JAVA入门】Day04 - 方法

【JAVA入门】Day04 - 方法 文章目录 【JAVA入门】Day04 - 方法一、方法的格式1.1 无参无返回值的方法定义和调用1.2 带参数的方法定义和调用1.3 形参和实参1.4 带返回值的方法定义和调用1.5 方法的注意事项 二、方法的重载三、方法的使用四、方法的内存原理4.1 方法调用的基本内…...

前端报错 SyntaxError: Unexpected number in JSON at position xxxx at JSON.parse

问题描述​ 控制台提示 SyntaxError: Unexpected number in JSON at position xxxx at JSON.parse 问题原因​ 原因&#xff1a;JSON 数据格式错误&#xff0c;是否符合 JSON 格式。 解决方法​ 应为json格式数据 什么是json格式数据 JSON&#xff08;JavaScript Object …...

Mybatis进阶详细用法

目录 条件构造器 案例 自定义SQL 案例 Service接口 案例 综合案例 条件构造器 案例 Testvoid testQueryMapper() {// 创建 QueryWrapper 实例QueryWrapper<User> queryWrapper new QueryWrapper<>();queryWrapper.select("id," "username,&…...

Android 系统省电软件分析

1、硬件耗电 主要有&#xff1a; 1、屏幕 2、CPU 3、WLAN 4、感应器 5、GPS(目前我们没有) 电量其实是目前手持设备最宝贵的资源之一&#xff0c;大多数设备都需要不断的充电来维持继续使用。不幸的是&#xff0c;对于开发者来说&#xff0c;电量优化是他们最后才会考虑的的事情…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...