文章目录

vue 组件进阶
- 动态组件
- keep-alive
- 插槽
- - 何为插槽
  - 插槽基本用法
  - 具名插槽
- 自定义指令
- - 分类
  - 完整写法
  - 简写形式
  - 注意事项
- Mixin 混入
- 插件
- `$nextTick`

vue 组件进阶

动态组件

vue 提供了内置的 <component> 组件用于动态切换组件。

<!-- 通过 is 属性指定要渲染的组件，传递的是字符串 -->
<component :is="comName"></component><button @click="comName = 'Left'">展示Left组件</button>
<button @click="comName = 'Right'">展示Right组件</button>

keep-alive

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组件的状态，对被包裹的组件进行状态缓存。

被 <keep-alive> 包裹的组件会多出两个生命周期函数：当组件被激活时，触发 activated 钩子；当组件被缓存时，触发 deactivated 钩子。

<keep-alive><component :is="comName"></component>
</keep-alive>

<keep-alive> 的 include 和 exclude 属性，分别用于指明哪些组件要缓存、哪些组件不要缓存。

<keep-alive include="Left, Right"><component :is="comName"></component>
</keep-alive>

插槽

何为插槽

插槽可以理解为组件封装期间，为用户预留的内容占位符。它是 vue 为组件封装者提供的能力，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

插槽基本用法

基础使用：

<!-- 子组件中预留插槽 -->
<template><div class="contianer"><h1>这是子组件</h1><slot></slot></div>
</template><!-- 父组件使用子组件时，向插槽填充内容 -->
<child-comp><p>填充到插槽的内容</p>
</child-comp>

如果子组件没有预留插槽，那么父组件填充给子组件的自定义内容会被丢弃：

<!-- 子组件没有预留插槽 -->
<template><div class="contianer"><h1>这是子组件</h1></div>
</template><!-- 父组件的自定义内容会被丢弃 -->
<child-comp><p>这段自定义内容会被丢弃</p>
</child-comp>

子组件可以为插槽提供后备内容，当父组件没有提供自定义内容时，后备内容就会生效。

<!-- 子组件提供后备内容 -->
<template><div class="contianer"><h1>这是子组件</h1><slot>这是后备内容，父组件没有提供自定义内容就会生效</slot></div>
</template><!-- 父组件没有提供自定义内容 -->
<child-comp> </child-comp>

具名插槽

组件在预留插槽时可以设置 name 属性，为插槽指定名称，这种有具体名称的插槽就叫具名插槽。没有设置 name 名称的插槽默认名称为 default 。

<!-- 子组件预留多个具名插槽 -->
<template><div class="contianer"><h1>这是子组件</h1><slot name="title">title 具名插槽</slot><hr /><slot name="content">content 具名插槽</slot>><hr /><slot>没有设置 name 名称则默认为 default</slot><slot name="default"></slot></div>
</template>

父组件向具名插槽提供自定义内容

新的写法：包裹一个 <template> 标签，同时在 <template> 中通过 v-slot:名称 指明插槽的名称。简写形式为 #名称 ，且 v-slot 只能使用在 <template> 和组件标签上，普通 HTML 标签不行
组件标签使用具名，需要 v-slot
旧的写法：slot="名称" 指明插槽名称
如果不指定插槽名称，那么自定义内容会被填充到所有的 default 插槽当中
同一插槽填充多个内容，是追加不是覆盖

<!-- 父组件向具名插槽提供自定义内容 -->
<child-comp><h1 slot="title">《赠汪伦》</h1><h1 slot="title">《唐诗》</h1>   <!-- 追加不覆盖 --><template v-slot:title><h1>《静夜思》</h1></template><!-- 简写形式 --><template #content><p>床前明月光，疑是地上霜。</p><p>举头望明月，低头思故乡。</p></template><template><p>这段内容没有指定名称，会被填充到所有 default 插槽中。</p></template>
</child-comp>

自定义指令

完整写法

<input type="text" v-focus="content" />

data() {return {content: 666}
},
directives: {focus: {// 指令与元素成功绑定时执行，执行一次bind(el, binding) {el.value = binding.value}// 指令所在元素插入页面时执行，执行一次inserted(el, binding) {// 一进入页面输入框获得焦点el.focus()}// 指令所在元素重新渲染时执行，执行 0+N 次update(el, binding) {el.value = binding.value}}
}// 全局写法
Vue.directive('focus', {bind(el, binding) {el.value = binding.value}inserted(el, binding) {el.focus()}update(el, binding) {el.value = binding.value}
})

简写形式

当 bind 函数和 update 函数里的逻辑完全相同时，可以简写
不需要定义 inserted 函数才使用简写形式
因此简写形式的调用时机是初次绑定和 DOM 更新

<h2 v-color="'red'">简写形式</h2>

directives: {color(el, binding) {el.style.color = binding.value}
}// 全局写法
Vue.directive('color', (el, binding) => {el.style.color = binding.value
}))

注意事项

自定义指令使用时需要添加 v- 前缀
指令名如果是多个单词，要使用 kebab-case 短横线命名方式，不要用 camelCase 驼峰命名
自定义指令三个函数里的 this 指向 window

<span v-big-number="n"></span>

data() {return {n: 1}
},
directives: {// 添加引号才是对象键名完整写法// 平时不加引号都是简写形式// 遇到短横线的键名就必须添加引号'big-number': {bind(el, binding) {console.log(this) // Windowel.innerText = binding.value * 10}}
}

Mixin 混入

Mixin 可以把多个组件共用的配置提取成一个混入对象
混入和组件自身的配置会合并
data 、methods 若冲突以自身为准
对于生命周期钩子，执行动作会合并，且先执行 Mixin 里的动作

定义混入：

// mixin.js
export const mixin = {methods: {showName() {alert(this.name)},},mounted() {console.log('hello mixin')},
}
export const mixin2 = {data() {return {x: 100,y: 200,}},
}

使用局部混入：

import { mixin, mixin2 } from '../mixin.js'export default {name: 'School',data() {return {schoolName: '北大',}},mixins: [mixin, mixin2],
}

使用全局混入：

// main.js
import { mixin, mixin2 } from './mixin.js'Vue.mixin(mixin)
Vue.mixin(mixin2)

插件

用于增强 Vue
本质是包含 install 方法的一对象，install 第一个参数是 Vue 构造函数，第二个以后的参数是插件使用者传递的数据

定义插件：

// pay.vue写我们的组件
import vpay from './pay'// 定义我们的插件
const myPlugin = {    // 该插件有一个install方法// 方法的第一个参数是传入的Vue，第二个参数可以插件的自定义参数install (Vue, options) {// 将其注册为vue的组件，'vpay'是组件名，keyboard是我们开发的组件Vue.component('vpay', vpay)    }
}// 最后将插件导出，并在main.js中通过Vue.use()即可使用插件
export default myPlugin

使用插件：

// 引入插件
import vpay from './lib/vpay'
// 使用插件
Vue.use(vpay);

而后在我们的页面中就可以直接像使用组件的方式使用插件：

<!--支付密码弹窗-->
<vpay    ref="pays"    v-model="show"               @close="close"    @forget="forget"    @input-end="inputEnd"
></vpay>

在插件里可以定义的方法有：

MyPlugin.install = function (Vue, options) {// 第一种方法. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}// 第二种方法. 添加全局资源Vue.directive('my-directive', {bind (el, binding, vnode, oldVnode) {// 逻辑...}...})// 第三种方法. 注入组件Vue.mixin({created: function () {// 逻辑...}...})// 第五种方法. 添加实例方法Vue.prototype.$myMethod = function (methodOptions) {// 逻辑...}// 第六种方法，注册组件Vue.component(组件名, 组件)
}

`$nextTick`

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调
什么时候用：当改变数据后，要基于更新后的 DOM 进行操作时，要在 nextTick 指定的回调函数中执行

「Vue自我检验」Vue 组件进阶知识，你了解多少？相关推荐

【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
动态组件.插槽.自定义指令学习目标 1.能够了解组件进阶知识. 2.能够掌握自定义指令的创建和使用. 3.能够完成tabbar案例的开发. 1.组件进阶 1.0 动态组件问题:如何切换2个组件,互 ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
js文件里获取路由 vue_「如何优雅的使用Vue?」不可不知的Vue实战技巧
作者: CHICAGO 转发连接:https://juejin.im/post/5e475829f265da57444ab10f 前言在大家都会用vue的时代,我们又如何去区别是新手小白还是资深vu ...
「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
Vue 实例之全局API，实例属性，全局配置，组件进阶
文章目录写在前面 Vue 全局 API Vue.directive Vue.use Vue.extend Vue.set Vue.mixin Vue 实例属性 vm.$props vm.$optio ...
vue Mutation 必须是同步函数为什么_Vue 开发必须知道的 36 个技巧「近1W字」
Vue 开发必须知道的 36 个技巧说明:本文并非原创,来源于segmentfault,搜索文章标题可查看原文前言 Vue 3.x 的Pre-Alpha 版本.后面应该还会有 Alpha.Beta ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

「Vue自我检验」Vue 组件进阶知识，你了解多少？