⬇️ JUMP TO THE END ↙️ 父传子 ↙️ 子传父 ↙️ Slot ↙️ 其他组件 ↙️ DOM操作

一、组件CSS作用域

对于CSS加上 scoped 属性会形成独立作用域
 

二、父组件传递子组件

父子组件传值总结
父子组件传值总结
父组件有一些数据,需要子组件来进行展示。这个时候我们可以通过props来完成组件之间的通信;props 是在组件上注册一些自定义的attribute(属性),父组件给这些attribute赋值,子组件通过attribute 的名称获取对应的值。
而且,props 有两种常见的用法:1️⃣ 字符串数组,数组中的字符串就是attribute的名称;2️⃣ 对象类型,对象类型我们可以在指定 attribute 名称的同时,指定它需要传递的类型、是否是必须的、默认值等等
最后,关于命名时:HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符;这意味着当你使用DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的kebab-case (短横线分隔命名) 命名;即 confirmBtn 👉 confirm-btn

父传子——数组写法

小记:父组件绑定 v-bind 绑定,子组件 prop 接收
 

父传子——对象类型(建议)

 
其中type可以是以下几种类型:String,Number,Boolean,Array,Object,Date,Function,Symbol。
⭐ 通常在HTML里,大小写不敏感(浏览器会把所有大小写字符解释为小写字符)。但是需要注意的是,prop写法可以用 camelCase (驼峰命名法) 和 kebab-case (短横线分隔命名),但更推介短横线分隔命名
 

非Prop的Attribute

当我们传递给一个组件某个属性,但是该属性并没有定义对应的props或者emits时,就称之为非Prop的Attribute,常见的包括class、style、id属性等
1️⃣ 当组件有单个根节点时,非Prop的Attribute将自动添加到根节点(理解为最外层元素)的Attribute中;【Attribute继承】
notion image
 
2️⃣ 如果我们需要将属性传递给根元素之外的元素,可以禁用根元素继承,禁用根元素继承attribute方法如下,然后通过 $attrs 来访问所有的 非props的attribute
 
3️⃣ 多个根节点的attribute
多个根节点的attribute如果没有显示的绑定,那么会报警告,我们必须手动的指定要绑定到哪一个属性上:
 

三、子组件传递给父组件

⚠️ 子组件传递给父组件主要有三个步骤:1️⃣ 在子组件 emits 属性中声明要触发的事件;2️⃣ 在子组件触发的函数中加入 this.$emit("声明的事件名");3️⃣ 父组件中子组件标签中绑定相关事件;

子传父——数组写法

 

子传父——对象写法

对象写法通常用于参数验证
 

父子组件案例

分页展示案例
分页展示案例
 

四、非父子组件间通信

Provide / Inject(有依赖关系)

对于深度结构的组件通信,子组件想获取父组件的部分内容的时候,ProvideInject 都可以使父组件成为其所有子组件的依赖提供者;父组件有一个 provide 选项来提供数据;子组件有一个 inject 选项来开始使用这些数据。我们可以将依赖注入看作是“long range props”,参考使用场景:主题颜色
基础用法:App -> Home -> HomeContent
 
 
补充1️⃣:在provide中使用模块化的数据
 
补充2️⃣:provide响应式
 

Mitt全局事件总线(eventBus)

安装mitt库 npm install mitt
封装eventBus.js(通常单独放置在utils文件夹)
 
About.vue和Home.vue两个组件关系如下:
notion image
 
Mitt的事件取消
 

六、插槽Slot

插槽基本使用

提高组建的复用性,抽取共性,预留修改空间,在Vue中 <slot> 元素作为承载分发内容的出口,可以看作占位符
基本使用:
 

具名插槽

小记:需要与template结合使用
⚠️ 备注:不带name的slot默认是default
 

高级组件 —— 动态插槽名

 

作用域插槽

渲染作用域

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的(所以父组件无法访问子组件的内容),具体案例如下:
 

作用域插槽的常见使用

可以理解为子组件父组件相互绑定
 

七、动态组件<component>

基本使用

动态组件是使用component 组件,通过一个特殊的attribute is 来实现
动态组件实际上可以改用路由实现;
 

keep-alive

继续保持组件的状态,而不是销毁掉,这个时候我们就可以使用一个内置组件:keep-alive
例如上述的例子中,在某个页面(home / about / category)加入一个点击递增的按钮以及对应的计数器。但是在切换组件的时候组件状态 不能得到缓存,所以我们用 <keep-alive> 标签将<component> 标签进行包裹时,可以实现保存组件的状态。此外,该标签还有部分可选属性:include(- string | RegExp | Array。只有名称匹配的组件会被缓存)、excludemax(number | string。最多可以缓存多少组件实例,一旦达到这个数字,那么缓存组件中最近没有被访问的实例会被销毁)
 

八、异步组件

前言 · Webpack分包方式

主要是为了提高渲染速度,提高用户体验。实现主要是将不同代码进行分包,不一次性下载全部源码。具体实现如下:
 

异步组件

对于某些组件我们希望通过异步的方式来进行加载(目的是可以对其进行分包处理),Vue中给我们提供了一个函数:defineAsyncComponent
defineAsyncComponent 接受两种类型的参数
1️⃣ 工厂函数,该工厂函数需要返回一个Promise对象;
2️⃣ 接受一个对象类型,对异步函数进行配置;
 

Suspend

⭐Suspense显示的是一个实验性的特性,API随时可能会修改
Suspense是一个内置的全局组件,该组件有两个插槽
default:如果default可以显示,那么显示default的内容;
fallback:如果default无法显示,那么会显示fallback插槽的内容;
 

九、引用元素和组件

$refs

某些情况下,我们在组件中想要 直接获取到元素对象或者子组件实例
在Vue开发中不推荐进行DOM操作的;
这个时候,我们可以给元素或者组件绑定一个ref的attribute属性;
 

$parent & $root & $el

我们可以通过$parent来访问父元素,也可以通过$root来实现访问根组件App。注意:在Vue3中已经移除了$children的属性
 

十、生命周期

notion image
备注:createmount 两个周期通常只会有一次
 

十一、缓存组件的生命周期

activated 和 deactivated 通常用作保存组件状态(缓存作用)
 

组件之V-model

在元素中使用 v-model 相当于做了双向绑定( v-bind:value 的数据绑定 和 @input 的事件监听),原理 具体如下:
 

组件中使用双向绑定应用

 

多个v-model使用

 
 
 
notion image
 
VueCLI × ViteAnimation
Loading...
😈Zabanya
😈Zabanya
一名喜欢瞎折腾选手
公告
 
部分教程类文章篇幅过大,可能会导致加载时间稍微偏长,非常感谢您的耐心等待 ~ 🎉