【金秋打卡】第 3 天 vue基础入门（下）| 1-7 插件的定义和使用

模块名	描述
课程名称	前端工程师2022版
课程章节	vue基础入门（下）
打卡知识进程	知识进程：3 / 21 ✔ （1）1-5 Teleport 传送门功能最近学习 ✔（2）1-6 更加底层的 render 函数 ✔(3) 1-7 插件的定义和使用 （4）1-8 数据校验插件开发实例 （5）2-1 Setup 函数的使用 （6）2-2 ref，reactive 响应式引用的用法和原理（1） （7）2-3 ref，reactive 响应式引用的用法和原理 （2）
主讲老师	Dell
学习开始时间	2022.10.27 22:50
学习结束时间	2022.10.27 23:40
总计时	50 min
课程收获	我们始终围绕是什么+为什么+怎么用 来输出所学收获 （1）是什么：Vue 里面的插件要解决的问题是把一些‍‍通用性的功能封装起来 （2）怎么玩： 写插件其实就写一个对象，在这里一定要写一个 install 方法， 表示‍‍插件运行时候会走的这样的一个逻辑。 install方法，它里面会接收两个参数，一个是 app，‍‍也就是 Vue 里面你创建出的 Vue 的实例， 另外一个参数就是options。 options它指的是什么？ 当我使用插件的时候，实际上我可以在后面去传递一些内容，比如说 name，我使用这个插件向插件里传入一些我自定义的参数。
学习感受/感想/领悟（心得）	如何刻意思考？如何开展刻意练习？

‍之前我们学习过 mixin 混入，‍‍通过混入能够对一些代码逻辑做一些封装，‍‍
实际上我们如果使用plugin插件的这种功能，可以对代码做更好的封装，‍‍
今天学习在 Vue 里面如何来编写一个插件。‍‍

我们常见的比如说轮播的效果其实都是通过插件来实现的，
写一下我们要学习的是plugin插件的概念，‍‍

写一个templates就可以了，然后写一个div，

然后现在应该是可以展示出一个hello world的内容，一个最简单的页面:

那么接下来怎么去定义一个 Vue 里面的插件?

其实 Vue 里面的插件要解决的问题是把一些‍‍通用性的功能封装起来，
我们在这里写一个插件，比如说我定一个‍‍ const叫myplugin这样的插件，

它其实就等于一个对象就好了。‍‍写插件其实就写一个对象，在这里一定要写一个 install 方法，

表示‍‍插件运行时候会走的这样的一个逻辑。

install方法，它里面会接收两个参数，一个是 app，‍‍也就是 Vue 里面你创建出的 Vue 的实例，

另外一个参数就是options，我们怎么能看一下‍‍这个 app 和 options 到底是什么？‍‍

我们可以做一个实验，我们定义了一个插件，其实ta什么也没干，‍‍只是写了一个标准的格式，一个对象里面有一个 install 方法:

接收一个 app 和options，‍‍你这个插件有了，我们怎么去用它也很简单，

在这里我们‍‍使用 app 实例的时候，我可以用 app点use‍‍来使用我们定义的插件，

这是 Vue 提供的自己的语法。‍‍

app点use指的是 Vue 的应用，要去使用 myPlugin 这个插件:

如果使用这个插件，那么 install 方法就会执行，所以我可以在这里console点log一下 app 和options:

然后保存。我们看一下效果:

(代码里的分号该有的大家自己加一下)

我们可以看到第一个参数是可以打印出来的，它就是 Vue 的一个实例，
这个实例里面有什么‍‍?

mixing生命周期函数，还有 config，包括 provide‍‍都有。‍‍

第二个options打印出的东西它是一个 undefined:

说明 options 没传内容。‍‍那么options它指的是什么？
当我使用插件的时候，实际上我可以在后面去传递一些内容，比如说 name，我使用这个插件向插件里传入一些我自定义的参数保存:

那么我可以在这里刷一下:

大家可以看到这个时候打印出的name dell这样的一个对象其实就是你传递进去的一个对象，这个对象其实就会传递到options这块来，‍‍它就是 options的一个意思，也就是说你使用这个插件的时候，‍‍你额外的参数会放到 options 里面去，而 app 是使用这个插件对应的 Vue 的实例，‍‍

那么插件一般我们会怎么写，我们可以在插件里实现一些什么样的功能呢？‍‍

其实既然我们得到了 app 的实例，我们就可以在插件里面对这个 app 做很多的扩展，‍‍比如说我可以在这里去通过provide提供一个全局的数据，‍‍ provide就和我们之前写一个组件在这里写 provide是一样的语法。‍‍我在这里可以写一个provide一个叫做 name 这样的一个变量:

它的名字叫做 Dell Lee。‍‍

我这个插件在 app实例上扩展了一个name，
它的值是Dell Lee，‍‍那么我想在比如说实例下面子组件里，my-title组件里使用这个name，我该怎么使用呢？‍‍

我们现在比如说在这里直接写这个name，‍‍你是使用不了的:

刷新大家可以看一下，ta说name找不到:

为什么呢？

因为你provide的一个内容如果在子组件里面跨层级使用它的话，你必须得用什么？
是不是用 inject 跟一个数组，

然后把你要用到的provide过来的内容声明一下，你才能去使用它：

保存一下，我们再来看‍‍刷新：

Dell Lee 就可以拿到了，

我们这个插件在 app 上面去扩展了一个‍‍变量名字，我们可以在子组件里面去直接通过inject去使用它。‍‍

当然我们也可以扩展一些，比如指令 app点directive，

然后我们扩展一个叫做之前的 focus 这样的指令，
指令里面它有一个mounted()，‍‍ta会接收一个 el，

我们就可以让el点focus:

我在这儿扩展了一个自定义的指令。

这里我就可以再去写点内容，‍‍我可以写一个 input 框，然后加一个v杠focus ：

保存一下。‍‍效果：

你会发现 input 框也可以用这个指令。