Vue3(五) 组件通信大汇总

news2024/9/28 10:46:39

文章目录

  • 一、props
  • 二、自定义事件
  • 三、mitt
  • 四、v-model
    • 1.`v-model`的本质
    • 2.`v-model`用在组件标签上
    • 3.更换`modelValue`
    • 4.更换`modelValue`时，可以在组件标签上多次使用`v-model`
  • 五、$attrs
  • 六、$refs,与￥parent
    • 1. 回顾标签ref属性修改组件信息
    • 2. $refs实现父修改所有子组件信息
    • 3. $parent实现子修改父
  • 七、provide、inject祖孙通信
    • 1. 祖传孙
    • 2. 孙传祖
  • 八、pinia,见之前的博客
  • 九、插槽slot
    • 1. 默认插槽
    • 2. 具名插槽
    • 3. 作用域插槽
  • 组件通信总结

一、props

概述：props是使用频率最高的一种通信方式，常用与 ：父传子。

  • 若 父传子：属性值是非函数。
  • 若 子传父：属性值是函数。

父传子

<!--父组件-->
<Child :car="car" />
<script>
	let car = ref('奔驰')
</script>
 
<!--子组件接收数据-->
 <h4>父亲给的车：{{ car }}</h4>
 <script>
    defineProps(['car'])
</script>

子传父:
需要父提前给子传递函数，通过参数接收子传递的数据

<!--父组件-->
	<h4 v-if="toy">子组件给的玩具：{{ toy }}</h4>
	<Child :car="car" :sendToy="sendToy" />
<script>
	let toy = ref('')
	function sendToy(value: string) {
		toy.value = value
	}
</script>
 
<!--子组件传递数据-->
<button @click="sendToy(toy)">把玩具给子组件</button>
<script setup lang="ts" name="Child">
	import { ref } from 'vue'
	let toy = ref('奥特曼')
	defineProps(['car', 'sendToy'])
</script>

二、自定义事件

触发事件的语法：

 let emit = defineEmits(['函数名'])
 // 触发事件
 emit('函数名',需要传递的参数)

举例：

<!--父组件自定义事件send-toy-->
	<h4 v-show="toy">子组件传递过来的玩具：{{ toy }}</h4>
	<Child @send-toy="getToy" />
<script>
	let toy = ref('')
	function getToy(value: string) {
		toy.value = value
	}
</script>
 
<!--子组件接收数据-->
<!--触发send-toy事件，父组件进而调用了getToy函数，并收到了参数toy-->
 <button @click="emit('send-toy', toy)">玩具给父组件</button>
 <script>
   let toy = ref('奥特曼')
   // 接收之后,emit('send-toy')就是在触发事件
   let emit = defineEmits(['send-toy'])
</script>

emit接收两个事件：

let emit = defineEmits(['a','b'])

触发时：

emit('a')
emit('b')

三、mitt

消息订阅pubsub，全局事件总线$bus,mitt都是一样的思想。
接收数据的：提前绑好事件(提前订阅消息)
提供数据的：在合适的时候触发事件(发布消息)

  1. 安装mitt：npm i mitt
  2. 新建文件：src\utils\emitter.ts
    // 引入mitt 
import mitt from "mitt";

// 创建emitter
const emitter = mitt()

// 创建并暴露mitt
export default emitter

    绑定事件：emitter.on(事件名,()=>{回调函数逻辑 })
    触发事件：emitter.emit(事件名,传递的参数)
    解绑事件：emitter.off(事件名)
    解绑所有事件：emitter.all.clear()

  3. 接收数据的组件绑定事件+在组件卸载前解绑事件
    在这里插入图片描述
  4. 发送数据的组件触发事件
    在这里插入图片描述

四、v-model

UI 组件库大量使用v-model进行通信。

1.v-model的本质

 <!-- v-model双向绑定，用在html标签上 -->
 <input type="text" v-model="username">
 <!-- 上边代码的本质是：  -->
 <!--  
	 :value="username"：实现数据到页面
	  @input...：实现页面到数据
  -->
 <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">

(<HTMLInputElement>$event.target).value其实就是$event.target.value,因为ts语法的限制，需要加断言。

2.v-model用在组件标签上

<!-- 修改modelValue -->
<ChildInput v-model="username" />
<!-- 本质是：默认写modelValue，也可以修改，修改见第3点更换modelValue -->
<ChildInput :modelValue="username" @update:modelValue="username = $event" />

:modelValue="username"：props实现父传子
@update...：类似于自定义事件，实现子传父；$event是子组件传过来的值

ChildInput 组件中：

<template>
    <!--将接收的modelValue值赋给input元素的value属性，目的是：为了呈现数据 -->
	<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件，触发时将$event.target.value通过参数传回去-->
  <input type="text" 
  :value="modelValue"
   @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)">
</template>

<script setup lang="ts" name="ChildInput">
// 接收父组件传递的值
defineProps(['modelValue'])
// 声明事件，
let emit = defineEmits(['update:modelValue'])
</script>

流程就是：

(1) 子组件将用户输入的值传给父组件：
  子组件中通过触发事件将$event.target.value的值(也就是用户输入的值)传给父组件，父组件将username的值改为用户输入的值。

(2) 用户输入的值传给子组件进而呈现在页面上：
  通过父组件的modelValue将新的username值传给子组件，子组件通过props接收后赋给input标签的value属性，呈现用户输入的数据。

3.更换modelValue

需要在v-model后加上别名

<!-- 修改modelValue -->
 <ChildInput  v-model:mima="password" />
 <!-- 本质 -->
<ChildInput :mima="username" @update:mima="username = $event" />

4.更换modelValue时，可以在组件标签上多次使用v-model

在这里插入图片描述
注意：

父组件中：@update:modelValue="username = $event"
子组件中： @input="emit('update:modelValue', $event.target.value)

什么时候用$event,什么时候用$event.target.value

$event是什么？什么时候能.target

  1. 对于原生事件，$event就是事件对象,====>能.target
  2. 对于自定义事件，$event就是触发事件时，所传递的数据,===>不能.target

五、$attrs

  • 用来实现祖孙组件之间的通信。
  • 当父组件向子组件通过props传值时，子组件``defineProps()只接收部分值，剩下没接收的值则存在了$attrs里。

1. 未读取的数据存在$attrs里

<!-- 父组件 -->
<div class="father">
	<h3>父组件</h3>
	<h4>a:{{ a }}</h4>
	<h4>b:{{ b }}</h4>
	<h4>c:{{ c }}</h4>
	<h4>d:{{ d }}</h4>
	<!-- v-bind="{ x: 100, y: 200 }" 等价于 :x="100" :y="200" -->
	<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" />
	<!-- 等价于 -->
	<!-- <Child :a="a" :b="b" :c="c" :d="d" :x="100" :y="200" /> -->
</div>
<!-- 子组件 -->
	<h4>a:{{ a }}</h4>
	<h4>其他：{{ $attrs }}</h4>
	<script>
		defineProps(['a'])
    </script>

在这里插入图片描述

2. 祖向孙传数据

<!--Father.vue-->
	<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" />

<!--Child.vue，中间组件啥也不接受，传给GrandChild-->
	<GrandChild v-bind="$attrs" />

<!--GrandChild.vue-->
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a:{{ a }}</h4>
		<h4>b:{{ b }}</h4>
		<h4>c:{{ c }}</h4>
		<h4>d:{{ d }}</h4>
		<h4>x:{{ x }}</h4>
		<h4>y:{{ y }}</h4>
	</div>
<script setup lang="ts" name="GrandChild">
	defineProps(['a', 'b', 'c', 'd', 'x', 'y'])
</script>

3. 孙向祖传数据
Father.vue:通过props传递函数

<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" :updateA="updateA" />
		<!-- 等价于 -->
<script setup lang="ts" name="Father">
	function updateA(value: any) {
		a.value = value
	}
</script>

Child.vue

<!--Child.vue，中间组件啥也不接受，传给GrandChild-->
<GrandChild v-bind="$attrs" />

GrandChild.vue:调用函数

<button @click="updateA(666)">更新A</button>
<script setup lang="ts" name="GrandChild">
	defineProps(['a', 'b', 'c', 'd', 'x', 'y', 'updateA'])
</script>

六、$refs,与￥parent

正确的是$ref与$parent,标题打这两个术语会出错。
$refs：用于父传子
$parent：用于子传父

属性说明
$refs值为对象，包含所有被ref属性标识的DOM元素或组件实例。
$parent值为对象，当前组件的父组件实例对象。

1. 回顾标签ref属性修改组件信息

在这里插入图片描述
子组件1Child1.vue

<template>
	<div class="child1">
		<h3>子组件1</h3>
		<h4> 玩具：{{ toy }}</h4>
		<h4> 书籍：{{ book }}本</h4>
	</div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from 'vue';
let toy = ref('奥特曼')
let book = ref(3)
// 向外暴露出来，父组件才能读取到子组件的值
defineExpose({ toy, book })
</script>

子组件2Child2.vue结构类似：

...
<script setup lang="ts" name="Child2">
...
let computer = ref('联想')
let book = ref(6)
// 向外暴露
defineExpose({ computer, book })
</script>

父组件Father.vue修改子组件信息

<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产有{{ house }}套</h4>
		<button @click="changeToy">修改子组件1的玩具</button>
		<button @click="changeComputer">修改子组件2的电脑</button>
		<Child1 ref="c1" />
		<Child2 ref="c2" />
	</div>
</template>

<script setup lang="ts" name="Father">
	 ...
	let house = ref(4)
	// 获取到两个组件的实例对象
	let c1 = ref()
	let c2 = ref()
	
	function changeToy() {
		c1.value.toy = '小猪佩奇'
	}
	function changeComputer() {
		c2.value.computer = '华为'
	}
</script>

父组件通过ref获取子组件实例对象后，可以对其属性进行修改的前提条件时，子组件将该属性defineExpose()暴露出来。

2. $refs实现父修改所有子组件信息

父组件Father.vue：

<button @click="getAllChild($refs)">增加所有子组件的书数量</button>
<script>
	// 参数或者写成 refs:{[key:string]:any}
	function getAllChild(refs: any) {
		console.log('refs',refs);
		for (let key in refs) {
		// 修改所有子组件的书本属性
			refs[key].book += 3
		}
	}
</script>

在这里插入图片描述

3. $parent实现子修改父

父组件Father.vue将数据暴露出去，子组件才能获取到该属性并修改:

let house = ref(4)
defineExpose({ house })

子组件：Child1.vue

<button @click="minusHouse($parent)">卖出一套房产</button>
<script>
	function minusHouse(parent: any) {
		console.log('parent',parent);
		parent.house -= 1
	}
</script>

在这里插入图片描述
这里读取数据不用写.value见之前的记录。

七、provide、inject祖孙通信

$attrs实现祖孙通信了，打扰了中间层；而provide与inject不会打扰中间层。

提供数据：provide('数据或方法',数据或方法)；
接收(注入)数据：inject('数据')

1. 祖传孙

祖组件：Father.vue

<script setup lang="ts" name="Father">
	let car = ref('奔驰')
	// 传递的数据，通过provide提供
	provide('car', car)
</script>

孙组件：GrandChild.vue

  <div class="grand-child">
    <h3>我是孙组件</h3>
    <h4>车子：{{ car }}</h4>
  </div>
<script setup lang="ts" name="GrandChild">
   // 1.引入inject
	import { inject } from 'vue'
   // 2. 读取数据；
	let car = inject('car')
</script>

注意，如果接收数据时

   let car = inject('car2')

祖组件没有提供名为car2的数据，则孙组件读取到的car值是undefined;
孙组件可设置默认值

  let car = inject('car2','奥迪') // car的默认值是奥迪

2. 孙传祖

思想还是祖给孙传递函数，孙通过参数的方式来给祖传信息。

祖组件：Father.vue

<script setup lang="ts" name="Father">
import { ref, provide } from 'vue';
let money = ref(500)

function spendMoney(value: number) {
  money.value -= value
}
// 可以将数据或方法一起传递
provide('moneyContext', { money, spendMoney })
</script>

孙组件：GrandChild.vue

 <div class="grand-child">
   <h3>我是孙组件</h3>
   <h4>银子：{{ money }}万元</h4>
   <h4>车子：{{ car }}</h4>
   <button @click="spendMoney(6)">花钱</button>
 </div>

<script setup lang="ts" name="GrandChild">
	import { inject } from 'vue'
	// 解构取值
	// let { money, spendMoney } = inject('moneyContext')
	// 上面的方式会有警告，ts不确定是否会有money和spendMoney，所以给个默认值
	let { money, spendMoney } = inject('moneyContext', { money: 0, spendMoney: (param: number) => { } })
</script>

注意：为什么传递的不是money.value，而是money?

provide('moneyContext', { money.value, spendMoney })

如果传递.value，则传递的只是一个值；
在这里插入图片描述

八、pinia,见之前的博客

Vue3(四) pinia

九、插槽slot

回顾Vue2插槽内容Vue2插槽

1. 默认插槽

将组件标签中的html结构放入slot所在的位置
在这里插入图片描述
在这里插入图片描述

2. 具名插槽

上边的例子中，游戏列表四个字在英雄联盟等列表的上方，是因为页面结构中<h2>游戏列表</h2>在ul的上方。
如果页面结构中<h2>游戏列表</h2>在ul的下方。如何仍旧保持这样的页面效果：
在这里插入图片描述
采用具名插槽，通过v-slot:插槽名或#插槽名 指定要把页面结构放在哪个插槽里。

 <Category>
   <template #s2>
     <video video :src="videoUrl" controls></video>
   </template>
   <template #s1>
     <h2>今日影视推荐</h2>
   </template>
 </Category>

3. 作用域插槽

子组件Game

<template>
  <div class="game">
    <h2>游戏列表</h2>
    <!-- 需要传递的值 -->
    <slot :youxi="games" x="hh" y="hello"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
import { reactive } from 'vue';
let games = reactive([
  { id: 'asgytdfats01', name: '英雄联盟' },
  { id: 'asgytdfats02', name: '王者农药' },
  { id: 'asgytdfats03', name: '红色警戒' },
  { id: 'asgytdfats04', name: '斗罗大陆' }
])
</script>

父组件Father.vue
在这里插入图片描述
params包含所有参数：
在这里插入图片描述
总结：

  1. 默认插槽：
  2. 具名插槽：
    命名<slot name="xxx"></slot>;
    使用： <template #xxx>或 <template v-slot：xxx>
  3. 作用域插槽
    数据在子组件身上： <slot :xxx="yyy" :n1="zzz" ></slot>
    父组件使用数据：
    <template v-slot="params"> params接收所有传递过来的数据
    <template v-slot:defalut="params"> 通过插槽名指定接收某个插槽的数据
    <template #defalut="{xxx}"> 通过#插槽名指定接收某个插槽的数据

组件通信总结

在这里插入图片描述

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

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

相关文章

学校周赛（1）

学校周赛（1）

A - Short Sort 题目&#xff1a; 思路&#xff1a; 本条题目只允许改一处地方&#xff0c;只有三个字母&#xff0c;我们可以直接枚举所有移动过的结果&#xff0c;同时使用哈希去记录其值&#xff0c;对于每一个输入我们都寻找是否有这个值记录&#xff0c;有则输出YES否则…
阅读更多...
毕业设计选题：基于ssm+vue+uniapp的校园订餐小程序

毕业设计选题：基于ssm+vue+uniapp的校园订餐小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…
阅读更多...
数据库管理与开发的全面解决方案——Devart全线产品测评

数据库管理与开发的全面解决方案——Devart全线产品测评

在现代数据库管理和应用开发中&#xff0c;拥有一套高效且强大的工具是至关重要的。Devart&#xff0c;作为一家专业提供数据库开发和管理工具的公司&#xff0c;已经在行业内树立了坚实的声誉。其产品线涵盖了从数据库连接驱动到全面的数据集成和管理解决方案&#xff0c;满足…
阅读更多...
读数据湖仓02数据抽象

读数据湖仓02数据抽象

1. 不同类型的数据 1.1. 不同类型的数据在存储方面有各自的特性&#xff0c;这些特性极大地影响了数据在数据湖仓中的存储和使用方式 1.2. 结构化数据 1.2.1. 在企业等组织中&#xff0c;只有少量的数据是结构化数据 1.2.2. 结构化数据是基于事务的数据&#xff0c;是组织日…
阅读更多...
[spring]用MyBatis XML操作数据库 其他查询操作 数据库连接池 mysql企业开发规范 动态sql

[spring]用MyBatis XML操作数据库 其他查询操作 数据库连接池 mysql企业开发规范 动态sql

文章目录 一. MyBatis XML配置文件1. 配置链接字符串和MyBatis2. 写持久层代码方法定义Interface方法实现xml测试 3. 增删改查增:删改查 二. 开发规范(mysql)三. 其他查询操作1. 多表查询2. #{} 和 ${}(面试题)使用区别 排序功能like查询 三. 数据库连接池四. 动态sql1. < i…
阅读更多...
【补充】倒易点阵定义

【补充】倒易点阵定义

晶体点阵&#xff1a;晶体内部结构在三维空间周期平移的客观存在的数学抽象&#xff0c;反映晶体实际原子排列。 倒易点阵&#xff1a;通过对晶体的正点阵进行傅里叶变换得到的&#xff0c;其中正点阵中每个阵点的位置矢量方向代表晶面族的法向&#xff0c;位置矢量的长度是晶…
阅读更多...
C++ | Leetcode C++题解之第442题数组中重复的数据

C++ | Leetcode C++题解之第442题数组中重复的数据

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> findDuplicates(vector<int>& nums) {int n nums.size();vector<int> ans;for (int i 0; i < n; i) {int x abs(nums[i]);if (nums[x - 1] > 0) {nums[x - 1] -nums[…
阅读更多...
我把101篇公众号文章喂给了AI，终于，「小爱」可以为我代言了！

我把101篇公众号文章喂给了AI，终于，「小爱」可以为我代言了！

前段时间&#xff0c;搞了个微信 AI 小助理-小爱(AI)&#xff0c;爸妈玩的不亦乐乎。 零风险&#xff01;零费用&#xff01;我把AI接入微信群&#xff0c;爸妈玩嗨了&#xff0c;附教程&#xff08;下&#xff09; 目前小爱(AI)仍在持续迭代中&#xff0c;受到了很多粉丝朋友…
阅读更多...
使用transformers中的pipeline调用huggingface中模型过程中可能遇到的问题和修改建议

使用transformers中的pipeline调用huggingface中模型过程中可能遇到的问题和修改建议

使用transformers中的pipeline调用huggingface中模型过程 前言管线使用中的问题和解决huggingface的连接问题使用huggingface示例修改源继续使用pipeline No module named keras.engine 前言 HuggingFace有一个巨大的模型库&#xff0c;其中包括很多的比较成熟的经典模型&…
阅读更多...
牛犇啊！LSTM+Transformer炸裂创新，精准度高至95.65%！

牛犇啊！LSTM+Transformer炸裂创新，精准度高至95.65%！

【LSTMTransformer】作为一种混合深度学习模型&#xff0c;近年来在学术界和工业界都受到了极大的关注。它巧妙地融合了长短期记忆网络&#xff08;LSTM&#xff09;在处理时序数据方面的专长和Transformer在捕捉长距离依赖关系上的优势&#xff0c;从而在文本生成、机器翻译、…
阅读更多...
Request 原理

Request 原理

目录 request原理 Request继承体系 ​编辑Request获取请求行数据方法介绍 1、获取请求行数据 2、获取请求头数据 3、获取请求体数据 4、其他功能 1、获取请求参数通用方式&#xff1a; 中文乱码问题&#xff1a; 2.请求转发 3.共享数据 4.获取servletcontext reques…
阅读更多...
set和map结构的使用

set和map结构的使用

个人主页&#xff1a;敲上瘾-CSDN博客 个人专栏&#xff1a;游戏、数据结构、c语言基础、c学习、算法 目录 一、序列式容器和关联式容器 二、set和multiset 1.insert 2.erase 3.find 4.count 三、map和mapmulti 1.pair 2.insert 3.find 4.operator[ ] 5.erase 6.lo…
阅读更多...
QT-自定义信号和槽对象树图形化开发计算器

QT-自定义信号和槽对象树图形化开发计算器

1. 自定义信号和槽 核心逻辑&#xff1a; 需要有两个类&#xff0c;一个提供信号&#xff0c;另一个提供槽。 然后在窗口中将 信号和槽 链接起来。 示例目标&#xff1a; 创建一个 Teacher 类&#xff0c;提供信号。 创建一个 Student 类&#xff0c;提供槽。 实现步骤&…
阅读更多...
策略路由控制选路

策略路由控制选路

&#x1f423;个人主页 可惜已不在 &#x1f424;这篇在这个专栏 华为_可惜已不在的博客-CSDN博客 &#x1f425;有用的话就留下一个三连吧&#x1f63c; 目录 一、 实验拓扑 二、 实验简述 三、 实验配置 配置路由信息 配置控制选路 四、 实验验证 ​ 一、 实验…
阅读更多...
「安装」 Windows下安装CUDA和Pytorch

「安装」 Windows下安装CUDA和Pytorch

「安装」 Windows下安装CUDA和Pytorch 文章目录 「安装」 Windows下安装CUDA和PytorchMac、Linux、云端Windows安装CUDA安装miniconda安装PyTorch测试总结 其他 Mac、Linux、云端 Mac、Linux、云端安装Miniconda和Pytorch的方法参考其他资料。 Windows 下面进行Windows下安装…
阅读更多...
CSS选择器的全面解析与实战应用

CSS选择器的全面解析与实战应用

CSS选择器的全面解析与实战应用 一、基本选择器1.1 通配符选择器&#xff08;*&#xff09;2.标签选择器&#xff08;div&#xff09;1.3 类名选择器&#xff08;.class&#xff09;4. id选择器&#xff08;#id&#xff09; 二、 属性选择器&#xff08;attr&#xff09;三、伪…
阅读更多...
转行大模型的必要性与未来前景：迎接智能时代的浪潮

转行大模型的必要性与未来前景：迎接智能时代的浪潮

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;特别是大型语言模型&#xff08;LLM, Large Language Models&#xff09;的崛起&#xff0c;各行各业正迎来一场前所未有的技术革命。对于普通程序员而言&#xff0c;转行进入大模型领域不仅是对个人职业发展…
阅读更多...
通配符与Powershell

通配符与Powershell

通配符与正则表达式 通配符 通配符是一种特殊的语句&#xff0c;主要有*、?和[]&#xff0c;用来模糊搜索文件。 通配符表达意思举例说明*星号、匹配任何字符*.cpp匹配.cpp文件?问号、匹配任意一个字符*.?d匹配具有特定格式的文件[]中括号、匹配括号中的一个字符.[a-z]d代…
阅读更多...
DC00020基于springboot新闻网站系统java web项目MySQL新闻管理系统

DC00020基于springboot新闻网站系统java web项目MySQL新闻管理系统

1、项目功能演示 DC00020基于springboot新闻网站系统java web项目MySQL 2、项目功能描述 基于springbootvue新闻网站包括用户和系统管理员两个角色。 2.1 用户功能 1、用户登录、用户注册 2、新闻信息&#xff1a;点赞、点踩、收藏、查看 3、用户分享&#xff1a;点赞、点踩…
阅读更多...
分库分表还是分布式？如何用 OceanBase的单机分布式一体化从根本上解决问题

分库分表还是分布式？如何用 OceanBase的单机分布式一体化从根本上解决问题

随着企业业务规模的不断增长&#xff0c;单机集中式的数据库系统逐渐难以承载企业日益增长的数据存储与处理需求。因此&#xff0c;MySQL 的分库分表方案成为了众多企业应对数据存储量激增及数据处理能力需求扩张的“止痛药”。尽管这一方案短期内有效缓解了企业面临的大规模数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023