vue日历组件 vue日历组件v-cl

Vue3全局组件通信之provide / inject

顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）：

vue日历组件 vue日历组件v-cl

vue日历组件 vue日历组件v-cl

C组件引入到B组件里，B组件引入到A组件里渲染，此时A是C的级别（可能还有更多层级关系），如果你用 props ，只能一级一级传递下去，那就太繁琐了，因此我们需要更直接的通信方式。

他们之间的关系如下， Grandson.vue 并非直接挂载在 Grandfather.vue 下面，他们之间还隔着至少一个 Son.vue （可能有多个）：

这一 Part 就是讲一讲 C 和 A 之间的数据传递，常用的方法有：

为了方便阅读，下面的父组件统一叫 Grandfather.vue ，子组件统一叫 Grandson.vue ，但实际上他们之间可以隔无数代…

TIP

因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可。

这个特性有两个部分： Grandfather.vue 有一个 provide 选项来提供数据， Grandson.vue 有一个 inject 选项来开始使用这些数据。

无论组件层次结构有多深，发起 provide 的组件都可以作为其所有下级组件的依赖提供者。

TIP

这一部分的内容变化都特别大，但使用起来其实也很简单，不用慌，也有相同的地方：

另外，要切记一点就是：provide 和 inject 绑定并不是可响应的。这是刻意为之的，但如果传入了一个可的对象，那么其对象的 property 还是可响应的。

我们先来回顾一下 2.x 的用法：

旧版的 provide 用法和 data 类似，都是配置为一个返回对象的函数。

3.x 的新版 provide ， 和 2.x 的用法区别比较大。

TIP

在 3.x ， provide 需要导入并在 setup 里启用，并且现在是一个全新的方法。

每次要 provide 一个数据的时候，就要单独调用一次。

每次调用的时候，都需要传入 2 个参数：

作非常简单对吧哈哈哈，但需要注意的是， provide 不是响应式的，如果你要使其具备响应性，你需要传入响应式数据，详见： 响应性数据的传递与接收

也是先来回顾一下 2.x 的用法：

TIP

在 3.x， inject 和 provide 一样，也是需要先导入然后在 setup 里启用，也是一个全新的方法。

每次要 inject 一个数据的时候，就要单独调用一次。

每次调用的时候，只需要传入 1 个参数：

来看一下如何创建一个 inject ：

也是很简单（写 TS 的话，由于 inject 到的值可能是 undefined ，所以要么加个 undefined 类型，要么给变量设置一个空的默认值）。

之所以要单独拿出来说， 是因为变化真的很大 - -

在前面我们已经知道，provide 和 inject 本身不可响应，但是并非完全不能够拿到响应的结果，只需要我们传入的数据具备响应性，它依然能够提供响应支持。

我们以 ref 和 reactive 为例，来看看应该怎么发起 provide 和接收 inject 。

对这 2 个 API 还不熟悉的同学，建议先阅读一下 响应式 API 之 ref 和 响应式 API 之 reactive 。

先在 Grandfather.vue 里 provide 数据：

在 Grandsun.vue 里 inject 拿到数据：

非常之前我们介绍过， keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改 currentView 切换组件时，组件的 beforeDestroy 不会触发。若该组件是次渲染，会触发 created ，当再次切换显示该组件时，created 不会再次触发。简单，非常方便！！！

TIP

响应式的数据 provide 出去，在子孙组件拿到的也是响应式的，并且可以如同自身定义的响应式变量一样，直接 return 给 template 使用，一旦数据有变化，视图也会立即更新。到目前为止，TableBox 已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。

但上面这句话有效的前提是，不破坏数据的响应性，比如 ref 变量，你需要完整的传入，而不能只传入它的 value ，对于 reactive 也是同理，不能直接解构去破坏原本的响应性。

切记！切记！！！

provide 和 inject 并不是可响应的，这是的故意设计，但是由于引用类型的特殊性，在子孙组件拿到了数据之后，他们的属性还是可以正常的响应变化。

先在 Grandfather.vue 里 provide 数据：

在 Grandsun.vue 里 inject 拿到数据：

引用类型的数据，拿到后可以直接用，属性的值更新后，子孙组件也会被更新。

基本数据类型被直接 provide 出去后，再怎么修改，都无法更新下去，子孙组件拿到的永远是次的那个值。

先在 Grandfather.vue 里 provide 数据：

在 Grandsun.vue 里 inject 拿到数据：

很失望，并没有变化。

TIP

那么是否一定要定义成响应式数据或者引用类型数据呢？

当然不是，我们在 provide 的时候，也可以稍作修改，让它能够同步更新下去。

我们再来一次，依然是先在 Grandfather.vue 里 provide 数据：

再来 Grandsun.vue 里修改一下 inject 的方式，看看这次拿到的数据：

这次可以正确拿到数据了，看出这2次的写法有什么区别了吗？

TIP

基本数据类型，需要 provide 一个函数，将其 return 出去给子孙组件用，这样子孙组件每次拿到的数据才会是新的。

但由于不具备响应性，所以子孙组件每次都需要重新通过执行 inject 得到的函数才能拿到的数据。

按我个人习惯来说，使用起来挺别扭的，能不用就不用……

点赞加关注，永远不迷路

教你一步步封装vue的toast和loading组件

if(response.data.code === 0){

我们在项目中都会用到toast,loading加载器。特别是在进行移动端的项目开发的时候，

进行异步作的时候去等待，在必要的时候用toast给用户提示。在app开发中，iOS有成熟的MBProgressHUD插件等等。

在web前端也有很多第三方库也提供了这些组件，比如mint-ui,element-ui等都包含这些组件，

但是存在一个缺点，当我们只需要使用toast，loading组件，并用不到其他组件的时候，我们还是需要安装整个组件库，

会导致我们依赖的第三方库增大。所以我就做了一个轻量级的toast,loading插件vue-toast-indicator。

导入包，全局使用

举个栗子：

这里我一个，更多精彩内容请点击链接， 上面创建了一个最简单的vue组件

设我们导入该组件名字是HelloWorld

就是这么简单，上面用到了vue的插件，自定义vue插件需要导出一个install方法

使用就更简单了

在项目中的任意vue组件可以通过 this.$component(); 使用了

文章

移动端调试神器vConsole

一名程序猿的失业之前世今生

vue封装的可视化滚动表格组件

匿名插槽对于单个组件，想自己灵活控制的情况下可以使用 v-if，设置 showModal 的值为true（加载）或者false（卸载）。

在大屏数据可视化方面，我们经常会使用到表格组件，这次封装的是不带分页的表格组件，对于长列表表格，我们采用的是滚动轮播的形式向下滚动展示表格数据。组件的翻页滚动是基于 vue-awesome-swiper 二次封装去实现的。

vue2能用vue3封装的组件

补充：vue-rou实例演示ter 组件复用问题

动态修改的。vue2能用vue3是用于vue的自定义组件封装动态修改的，因此是封装的组件。组件是数据和方法的封装，就是指一组数据可以提供一些作实现一些简单的功能，比如用户查询组件。

vue如何替换控件的方法

由于以上逻辑都是在引入了 TableBox 的父组件中完成的，其能够控制数据的刷新，由于 场景1 中我们已经把数据请求的逻辑都封装在了 TableBox 中，所以我们需要让其向外暴露出一个 Boolean 属性：reloadData，当此属性为 true 时，TableBox 会重新请求一次API，并刷新列表。

1、使用Vue，extend来创建全局Vue组件。

那vue-router是怎么判断某一个组件可以复用的呢？ 我们看一下下面这条路由配置：

2、通过template属性，指定组件要展示的html结构。

3、使用Vue，component(组件名，创建出来的组件模板对象）。

4、使用组件，直接把组件名称以HTML标签的形式引入页面即可。

15《Vue 入门教程》Vue 动态组件 & keep-alive

兄弟组件之间通信可以通过共同祖辈搭桥 $parent 或$root

动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用非常简单。keep-alive 是 vue 的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染 DOM。

"运行案例" 可查看在线运行效果

通过使用保留的 元素，动态地把组件名称绑定到它的 is 特性，可以实现动态组件：

代码解释： HTML 代码第 2 行，我们使用动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行，我们定义了组件 ComponentA、ComponentB、ComponentC。

最终的实现效果是：当点击按钮的时候会动态切换展示的组件。

keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。

keep-alive 的用法相对简单，直接使用 keep-alive 包裹需要缓存的组件即可：

代码解释： HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行，我们定义了组件 ComponentA、ComponentB、ComponentC，分别定义了他们的 created 和 beforeDestroy 。

activated 和 deactivated 和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过， activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated ：进入组件时触发。 deactivated ：退出组件时触发。

示例代码：

代码解释： JS 代码中，我们定义了组件 ComponentA、ComponentB，并分别定义了他们的 activated 和 deactivated 函数。 HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行，我们定义了两个按钮，通过点击按钮切换 currentView 的值。当我们切换组件显示时，可以看到这样的打印信息：

include 和 exclude 是 keep-alive 的两个属性，允许组件有条件地缓存。 include： 可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。 exclude： 可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。

示例：

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA，ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件 ComponentA 和 ComponentB 的 created 函数只有在次组件被创建的时候才会触发，而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例：

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA，ComponentB。

本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：

Vue中修改组件库(如element ui)样式的可行方案

除此之外，由于 Table 中的数据往往都是从后端获取的，所以这个包含 Table 的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个 Loading 动画；当请求数据为空时，需要显示一个占位的空元素控件。

vue中我们经常会使用一些第三方的组件库，可以达到快速搭建项目界面布局的效果，无非就是用什么组件库的问题。

但是，不管我们使用element ui、vuetify或是别的什么组件库，修改样式是必不可少的一个工作。

针对公司自己的风格或是ui的设计，组件库默认的样式、配色等并不一定符合所有人的要求，那么修改组件库的样式就成了必不可少的一部分。

就拿 element ui 组件举例，这里描述几种经测试有效的解决方案：

好了，以上就是博主针对修改组件库样式总结的一些可行方案，希望对你有帮助。

如有问题，}}请指出，接受批评。

Vue3_15（全局组件，局部组件，递归组件）

组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。

例如组件使用频率非常高（table，Input，button，等）这些组件 几乎每个页面都在使用便可以封装成全局组件

4.在 nextTick 中将 renderComponent 上设置回 true

案例------我这儿封装一个Card组件想在任何地方去使用

使用方法

在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用

其次调用 component 个参数组件名称 第二个参数组件实例

使用方法

直接在其他vue页面 立即使用即可 无需引入

就是在一个组件内（A） 通过import 去引入别的组件(B) 称之为局部组件

应为B组件只能在A组件内使用 所以是局部组件

如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏

案例递归树

在父组件配置数据结构 数组对象格式 传给子组件

子组件接收值

template

TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

vue更新或者重新加载组件方法

本小节我们将介绍 Vue 的动态组件，以及缓存 keep-alive 的使用。包括动态组件的使用方法，以及如何使用 keep-alive 实现组件的缓存效果。

分享vue更新组件if(to.name === 't'){三种方法，vue版本为2.6.10

对于在列表中使用的组件，可以使用:key，组件id变化可以触发重新加载组件，我这边的例子使用的是时间戳

Vue中重新渲染组件的方法总结

有时Vue的反应性系统还不够，您只需要重新渲染组件即可。

重新渲染组件有以下几个办法：

1.可怕的方法：重新加载整个页面

2.可怕的方法：使用v-if

3.更好的方法：使用Vue的内置forceUpdate方法

4.的方法：在组件上进行key更改

非常不建议这样做，我们来看下一个办法。

v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。

下面我们设置它以使其v-if能够正常工作的方式。

在您的template，您将添加v-if指令：

这里发生的事情：

1.最初 renderComponent 设置为 true ，因此 my-component 组件渲染

2.在 forceRerender 中我们立即设置 renderComponent 为 false

3.停止渲染组件 my-component ，因为该 v-if 指令现在的值为 false

5.现在该 v-if 结果为 true ，因此我们 my-component 再次开始渲染

我们必须等到 nextTick ，否则我们不会看到任何变化。

在Vue中，一个 nextTick 是一个DOM更新周期。Vue将收集在同一 nextTick 中进行的所有更新，在 nextTick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到 nextTick ，我们对 renderComponent 的更新就会自动取消，什么也不会改变。

其次，当我们第二次渲染时，Vue将创建一个全新的组件。 Vue 将销毁个，并创建一个新的，这意味着我们的新 my-component 将像正常情况一样经历其所有生命周期- created ， mounted 等。

这是解决此问题的两种方法之一，此方法得到Vue的支持。

forceUpdate 在组件实例本身以及全局实例上，可以通过两种不同的方式调用：

重要提示 ：这不会更新您拥有的任何计算属性。调用 forceUpdate 只会 强制重新渲染视图

在许多情况下，我们需要}}重新渲染组件。

要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。

我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。

每次 forceRerender 被调用时，我们的 componentKey 都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

原文：

snowcalendar是流氓软件吗

旧版的 inject 用法和 props 类似，3.x 的新版 inject ， 和 2.x 的用法区别也是比较大。

snowcalendar是一个类似googlecalendar或FullCalendar的vue的前端日历套件，其特色有：不包含jquery;可自行设计作介面及资料交互方式，因为与资料完全开放;初始化资料以月为单位，使用者切换到当月动态取得资料;提供多语系，有繁体中文、简体中文、英文、日文;提供完整的日历视图，有年、月、周、天。

"流氓软件"是介于和正规软件之间的软件。如果电脑中有流氓软件，会出现用户使用电脑上网时，会有窗口不断跳出的情况。但snowcalendarr没有经过用户同意，就不会自己弹出场口，属于正规软件。用户可以根据自script您将添加使用以下方法nextTick：己的需要考虑是否安装snowcalendar软件。