Vue 知识点汇总（上）--附案例代码及项目地址

Vue

预备知识与后续知识及项目案例

HTML入门与进阶以及HTML5
CSS
JS-上
JS-下
jQuery
Node.js + Gulp 知识点汇总
MongoDB + Express 入门及案例代码
Vue项目开发-仿蘑菇街电商APP
Vue 知识点汇总（下）–附案例代码及项目地址

一、简介

1.Vue (读音 /vjuː/，类似于 view)的简单认识

（1）Vue是一个渐进式的框架，什么是渐进式的呢？

• 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
• 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
• 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

（2）Vue有很多特点和Web开发中常见的高级功能

• 解耦视图和数据
• 可复用的组件
• 前端路由技术
• 状态管理
• 虚拟DOM

这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行讲解。
（3）学习Vuejs的前提？
从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
但是你需要具备一定的HTML、CSS、JavaScript基础。

2.Vue.js安装

使用一个框架，我们第一步要做什么呢？安装下载它

安装Vue的方式有很多：

方式一：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

二、Vue知识量化

三、内容

注：本文多数内容属于Vue2.6之前的内容，只有较为重要的地方才会补充2.6版本之后的内容，望周知。

1、Vue中的MVVM

（1）什么是MVVM呢？

通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)
https://zh.wikipedia.org/wiki/MVVM
维基百科的官方解释，我们这里不再赘述。

（2）Vue的MVVM

View层：

• 视图层
• 在我们前端开发中，通常就是DOM层。
• 主要的作用是给用户展示各种信息。

Model层：

• 数据层
• 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
• 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

• 视图模型层
• 视图模型层是View和Model沟通的桥梁。
• 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
• 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

1.MVVC 和 MVC

在前端的MVC模式中，M还是表示Modal层，负责与后台交互数据，V表示View，负责页面上DOM的渲染，C表示绑定在DOM元素上的事件，当Controllor中的事件被调用，会去调用Modal中的数据，然后交给View重新渲染数据

框架篇—MVC、MVP、MVCS、MVVM、VIPER使用关系总结

mvc和mvvm的区别

MVC

MVVM为前端view里面的

2、Vue的生命周期

3、基础语法

Mustache

• 如何将data中的文本数据，插入到HTML中呢？

  • 已经学习过了，可以通过Mustache语法(也就是双大括号)。
  • Mustache: 胡子/胡须.

• 我们可以像下面这样来使用，并且数据是响应式的

v-once

• 但是，在某些情况下，我们可能不希望界面随意的跟随改变

  • 这个时候，我们就可以使用一个Vue的指令

• v-once:

  • 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
  • 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

只渲染一次，不会再被改变

v-html

• 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
  • 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

• 如果我们希望解析出HTML展示

  • 可以使用v-html指令
    • 该指令后面往往会跟上一个string类型
    • 会将string的html解析出来并且进行渲染

v-text

• v-text作用和Mustache比较相似：都是用于将数据显示在界面中
• v-text通常情况下，接受一个string类型

在不想用mustache语法的时候，可以使用这样

但它不够灵活。建议使用mastache语法

v-pre

将代码原封不动的解析出来，不做任何处理

• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
• 比如下面的代码：
  第一个h2元素中的内容会被编译解析出来对应的内容
  第二个h2元素中会直接显示{{message}}

v-cloak

将未解析出来的代码块进行隐藏

但基本不会用到

v-bind

基础

• 前面我们学习的指令主要作用是将值插入到我们模板的内容当中。

• 但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

  • 比如动态绑定a元素的href属性
  • 比如动态绑定img元素的src属性

• 这个时候，我们可以使用v-bind指令：
  作用：动态绑定属性
  缩写：:
  预期：any (with argument) | Object (without argument)
  参数：attrOrProp (optional)

• v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)

• 在开发中，有哪些属性需要动态进行绑定呢？

  • 还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

• 比如通过Vue实例中的data绑定元素的src和href，代码如下：

v-bind语法糖

v-bind有一个对应的语法糖，也就是简写方式
在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
简写方式如下：

v-bind绑定class

• 很多时候，我们希望动态的来切换class，比如：
  • 当数据为某个状态时，字体显示红色。
  • 当数据另一个状态时，字体显示黑色。
• 绑定class有两种方式：
  • 对象语法
  • 数组语法

（1）绑定方式：对象语法

• 对象语法的含义是:class后面跟的是一个对象。

对象语法有下面这些用法：

用法一：直接通过{}绑定一个类
Hello World

用法二：也可以通过判断，传入多个值
Hello World

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
Hello World

（2）绑定方式：数组语法

• 数组语法的含义是:class后面跟的是一个数组。

数组语法有下面这些用法：

用法一：直接通过{}绑定一个类
Hello World

用法二：也可以传入多个值
Hello World

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
Hello World

案例：vue v-for出来的列表，点击当前，当前被点击的字体变颜色

    
    
    
    
    
    



    

        

            

                {{item}}--{{m}}
        
    

    

v-bind 动态绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候，比如font-size

• 我们可以使用驼峰式 (camelCase) fontSize
• 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定class有两种方式：

• 对象语法
• 数组语法

（1）绑定方式一：对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型

• 对象的key是CSS属性名称
• 对象的value是具体赋的值，值可以来自于data中的属性

（2）绑定方式二：数组语法

style后面跟的是一个数组类型

多个值以，分割即可

计算属性 computed

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

• 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
• 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

我们可以将上面的代码换成计算属性：

• OK，我们发现计算属性是写在实例的computed选项中的。

计算属性中也可以进行一些更加复杂的操作，比如下面的例子：

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter

• 在上面的例子中，我们只是使用getter来读取。
• 在某些情况下，你也可以提供一个setter方法（不常用）。
• 在需要写setter的时候，代码如下：

我们可能会考虑这样的一个问题：

• methods和computed看起来都可以实现我们的功能，
• 那么为什么还要多一个计算属性这个东西呢？
• 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

computed区别于method的核心

在官方文档中，强调了computed区别于method最重要的两点

1. computed是属性调用，而methods是函数调用
2. computed带有缓存功能，而methods不是
3. computed定义的方法我们是以属性访问的形式调用的，{{computedTest}}
4. 但是methods定义的方法，我们必须要加上()来调用，如{{methodTest()}}，否则，视图会出现test1的情况，见下图
5. 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 text 还没有发生改变，多次访问 getText 计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法只要页面中的属性发生改变就会重新执行
6. 对于任何复杂逻辑，你都应当使用计算属性
7. computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值

事件监听 v-on

在前端开发中，我们需要经常和用于交互。

• 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
• 在Vue中如何监听事件呢？使用v-on指令

v-on介绍

• 作用：绑定事件监听器
• 缩写：@
• 预期：Function | Inline Statement | Object
• 参数：event

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

• 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
  但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
• 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。

条件判断 v-if、v-else-if、v-else、及条件渲染 v-show

v-if、v-else-if、v-else

这三个指令与JavaScript的条件语句if、else、else if类似。

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

简单的案例演示：

v-if的原理：

• v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
• 也就是根本没有不会有对应的标签出现在DOM中。

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：

v-show 和 v-if 的区别

• v-if是真正的条件渲染，他会确保在切换过程中条件块内的时间和子组件被销毁和重建（组件被重建将会调用created）
• v-show不论如何，都会被渲染在DOM中，当条件为真值时，将会修改条件的css样式
• v-if有更高的切换开销，v-show有更高的初始渲染开销
• v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
• v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
• v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• v-if适合运营条件不大可能改变；v-show适合频繁切换。

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

• v-if当条件为false时，压根不会有对应的元素在DOM中。
• v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

• 当需要在显示与隐藏之间切片很频繁时，使用v-show
• 当只有一次切换时，通过使用v-if

v-for

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。

• 格式如下：item in items的形式。

我们来看一个简单的案例：

如果在遍历的过程中不需要使用索引值

• v-for=“movie in movies”
• 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

• 语法格式：v-for=(item, index) in items
• 其中的index就代表了取出的item在原数组的索引值。

v-for可以用户遍历对象：

比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

为什么需要这个key属性呢（了解）？

• 这个其实和Vue的虚拟DOM的Diff算法有关系。
• 这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

• 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
• 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识

• Diff算法就可以正确的识别此节点
• 找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。

检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

注:通过索引值修改数组中的元素不是响应式的

案例：图书购物车

v-model

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例的解析：

• 当我们在输入框输入内容时
• 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
• 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
• 所以，通过v-model实现了双向的绑定。

当然，我们也可以将v-model用于textarea元素

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

也就是说下面的代码：等同于下面的代码：

等同于

v-model：radio

当存在多个单选框时

v-model：checkbox

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：

• v-model即为布尔值。
• 此时input的value并不影响v-model的值。

多个复选框：

• 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
• 当选中某一个时，就会将input的value添加到数组中。

lable好处就是用户可以点击文字也会选中

v-model：select

和checkbox一样，select也分单选和多选两种情况。

单选：只能选中一个值。

• v-model绑定的是一个值。
• 当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

• v-model绑定的是一个数组。
• 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

v-model双向绑定数组数据时遇到的天坑

    
 
        篮球
        羽毛球
        兵乓球
        足球

        
您的爱好是：{{hobbies}}

        
            {{item}}
        
        
    

    

用Chrome浏览器

用360浏览器

查看了几个文档后发现是Chrome不兼容Object.observe

解决方法

使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。 还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名。

vue中遇到的坑 — 变化检测问题（数组相关）

深入响应式原理

也就是说，因为360浏览器太老（没有更新）的原因，没有废弃object.server，所以才能够这样用。现阶段只能使用vue.set

修饰符

lazy修饰符：

• 默认情况下，v-model默认是在input事件中同步输入框的数据的。
• 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
• lazy修饰符可以让数据在失去焦点或者回车时才会更新：

number修饰符：

• 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
• 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
• number修饰符可以让在输入框中输入的内容自动转成数字类型：

trim修饰符：

• 如果输入的内容首尾有很多空格，通常我们希望将其去除
• trim修饰符可以过滤内容左右两边的空格

4、组件化开发

认识组件化

人面对复杂问题的处理方式：

任何一个人处理信息的逻辑能力都是有限的

所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

但是，我们人有一种天生的能力，就是将问题进行拆解。

如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。

但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

Vue组件化思想

组件化是Vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。

组件化思想的应用：
有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也更强。

注册组件

组件的使用分成三个步骤：

• 创建组件构造器
• 注册组件
• 使用组件。

我们来看看通过代码如何注册组件

查看运行结果：

• 和直接使用一个div看起来并没有什么区别。
• 但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用来完成呢？

这里的步骤都代表什么含义呢？

1.Vue.extend()：

• 调用Vue.extend()创建的是一个组件构造器。
• 通常在创建组件构造器时，传入template代表我们自定义组件的模板。
• 该模板就是在使用到组件的地方，要显示的HTML代码。
• 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

2.Vue.component()：

• 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
• 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个Vue实例下，否则它不会生效。

• 我们来看下面我使用了三次
• 而第三次其实并没有生效：

组件其他补充

全局组件和局部组件

当我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

父组件和子组件

在前面我们看到了组件树：

• 组件和组件之间存在层级关系
• 而其中一种非常重要的关系就是父子组件的关系

我们来看通过代码如何组成的这种层级关系：

父子组件错误用法：以子标签的形式在Vue实例中使用

• 因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
• 该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）
• 是只能在父组件中被识别的。
• 类似这种用法，是会被浏览器忽略的。

注册组件语法糖

在上面注册组件的方式，可能会有些繁琐。
Vue为了简化这个过程，提供了注册的语法糖。
主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。
语法糖注册全局组件和局部组件：

组件数据存放

组件是一个单独功能模块的封装：

这个模块有属于自己的HTML模板，也应该有属性自己的数据data。

组件中的数据是保存在哪里呢？顶层的Vue实例中吗？

我们先来测试一下，组件中能不能直接访问Vue实例中的data

我们发现不能访问，而且即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿。

结论：Vue组件应该有自己保存数据的地方。

组件数据的存放

组件自己的数据存放在哪里呢?

组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)

只是这个data属性必须是一个函数

而且这个函数返回一个对象，对象内部保存着数据

为什么data在组件中必须是一个函数呢?

• 首先，如果不是一个函数，Vue直接就会报错。
• 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

父子组件通信

父子组件的访问方式： $children

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。
父组件访问子组件：使用$children或$refs
子组件访问父组件：使用$parent

我们先来看下$children的访问
this.$children是一个数组类型，它包含所有子组件对象。
我们这里通过一个遍历，取出所有子组件的message状态。

父子组件的访问方式： $refs

$children的缺陷：

• 通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。
• 但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。
• 有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs

$refs的使用：

• $refs和ref指令通常是一起使用的。
• 首先，我们通过ref给某一个子组件绑定一个特定的ID。
• 其次，通过this.$refs.ID就可以访问到该组件了。

父子组件的访问方式： $parent

如果我们想在子组件中直接访问父组件，可以通过$parent
注意事项：

• 尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做。
• 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。
• 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。
• 另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。

非父子组件通信

刚才我们讨论的都是父子组件间的通信，那如果是非父子关系呢?

非父子组件关系包括多个层级的组件，也包括兄弟组件的关系。

在Vue1.x的时候，可以通过$dispatch和$broadcast完成
$dispatch用于向上级派发事件
$broadcast用于向下级广播事件
但是在Vue2.x都被取消了

在Vue2.x中，有一种方案是通过中央事件总线，也就是一个中介来完成。
但是这种方案和直接使用Vuex的状态管理方案还是逊色很多。
并且Vuex提供了更多好用的功能，所以这里我们暂且不讨论这种方案，后续我们专门学习Vuex的状态管理。

插槽slot(Vue 2.6之前用法)

编译作用域

在真正学习插槽之前，我们需要先理解一个概念：编译作用域。

官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念：

我们来考虑下面的代码是否最终是可以渲染出来的：

中，我们使用了isShow属性。
isShow属性包含在组件中，也包含在Vue实例中。

答案：最终可以渲染出来，也就是使用的是Vue实例的属性。

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

而我们在使用的时候，整个组件的使用过程是相当于在父组件中出现的。

那么他的作用域就是父组件，使用的属性也是属于父组件的属性。

因此，isShow使用的是Vue实例中的属性，而不是子组件的属性。

为什么使用slot

slot翻译为插槽：

• 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
• 插槽的目的是让我们原来的设备具备更多的扩展性。
• 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽：

• 组件的插槽也是为了让我们封装的组件更加具有扩展性。
• 让使用者可以决定组件内部的一些内容到底展示什么。

栗子：移动网站中的导航栏。

• 移动开发中，几乎每个页面都有导航栏。
• 导航栏我们必然会封装成一个插件，比如nav-bar组件。
• 一旦有了这个组件，我们就可以在多个页面中复用了。

但是，每个页面的导航是一样的吗？No，我以京东M站为例

如何封装这类组件呢？slot

它们也很多区别，但是也有很多共性。
如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。
但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

如何封装合适呢？抽取共性，保留不同。
最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
是搜索框，还是文字，还是菜单。由调用者自己来决定。

这就是为什么我们要学习组件中的插槽slot的原因。

slot基本使用

了解了为什么用slot，我们再来谈谈如何使用slot？
在子组件中，使用特殊的元素就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子，来给子组件定义一个插槽：
中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
有了这个插槽后，父组件如何使用呢？

具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？
非常简单，只要给slot元素一个name属性即可

我们来给出一个案例：
这里我们先不对导航组件做非常复杂的封装，先了解具名插槽的用法。

作用域插槽：准备

作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。

这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：
父组件替换插槽的标签，但是内容由子组件来提供。

我们先提一个需求：
子组件中包括一组数据，比如：pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C++’]
需要在多个界面进行展示：

• 某些界面是以水平方向一一展示的，
• 某些界面是以列表形式展示的，
• 某些界面直接展示一个数组

内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
利用slot作用域插槽就可以了
我们来看看子组件的定义：

作用域插槽：使用

在父组件使用我们的子组件时，从子组件中拿到数据：
我们通过