普通网友

Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）

Vue 介绍

什么是 vue ？

构建用户界面
- 用 vue 往 html 页面中填充数据，非常的方便
框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
- 要学习 vue，就是在学习 vue 框架中规定的用法！
- vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
- 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！

vue 的两个特性

数据驱动视图：
- 数据的变化会驱动视图自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
双向数据绑定：

在网页中，form 表单负责采集数据，Ajax 负责提交数据。
- js 数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

MVVM 的工作原理

ViewModel作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构。

当单元素的值发生变化表时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

起步

第一个Vue程序：

导入开发版本的 Vue.js
创建 Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

{{message}}

基本代码与 MVVM 的对应关系

插件库

day.js 快速日期格式化

解决格式化Vue文件时逗号、分号问题：

在根目录中，添加一个 .prettierrc.json 配置文件，写入：

{
	"singleQuote": true,  
    "semi": false,
    "trailingComma": "none"
}

一劳永逸方法：

在电脑上的用户目录下新建一个 .prettierrc.json 文件，同理上面的参数。

在 **Vs code **的 setting.json 中添加配置路径：

	// 设置 配置文件,解决格式化vue文件时逗号、分号爆红问题
	// 这里注意配置路径，记得使自己计算机上的用户名
  "prettier.configPath": "C:/Users/mi/.prettierrc.json",

解决格式化时函数括号前的空格问题：

Prettier 格式化插件无法处理函数括号前添加空格问题

解决办法一、在当前项目里的 .eslintrc.js 里 rules 规则里添加忽略加空格爆红提示：

'space-before-function-paren':['error','never']

解决办法二：使用 Prettier now 插件可以解决此问题。

vue 指令

1. 内容渲染指令

v-text 设置标签的内容, 默认写法会覆盖元素内部原有的内容 , 内部支持写表达式。
{{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

2. v-bind 属性绑定属性

在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
简写是英文的 :

在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
```
这是一个 div
```
使用 v-bind 在元素绑定时希望内传入 Number数值时，避免被解析成字符串

3. v-on 事件绑定属性

v-on: 简写是 @

语法格式为：

 count的值是：{{ count }}



methods: {
   add() {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
   }
}

$event

在事件绑定时，会有一个原生DOM 的事件对象 e，如果事件对象传入参数，默认的事件对象会被覆盖。

$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。

例如：

// 点击按钮让count值 递增，绑定点击事件并传参



methods: {
   add(n, e) {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
   }
}

事件修饰符：

事件绑定期间非常好玩的一个东西，对事件的触发进行控制。

.prevent
```
链接
```
.stop

事件修饰符

说明

.prevent

阻止默认行为 (如：阻止a链接的跳转，阻止表单提交等)

.stop

阻止冒泡事件

.capture

以捕获模式触发当前的事件处理函数

.once

绑定的事件只触发一次

.self

只有在event.target 是当前元素自身时触发事件处理函数

按键修饰符

按键

键码值

使用

Enter

.enter

Tab

.tab

Delete

.delete (捕获“删除”和“退格”按键)

Esc

.esc

BackSpace

.space

Up Arrow

.up

Left Arrow

.left

Right Arrow

.right

Dw Arrow

.down

1.自定义其他的按键别名：

Vue.config.keyCodes.f6 = 118

  // 只有单击f6键才会触发xxx的回调

2.多个按键一并触发该事件

@keyup.ctrl.enter="XXX"   //  按下ctrl和enter才触发事件执行

【案例应用】：表单输入后按回车键添,按esc则清空表单

4. v-model 表单绑定

在不操作 DOM 的前提下，实现表单元素和数据的双向绑定。

v-model 指令的修饰符

修饰符

作用

示例

.number

自动将用户输入值转为 Number

number=“age” />

.trim

去除首尾空白字符

trim=“msg” />

.lazy

表单输入后失去焦点时更新页面数据，而非实时更新

lazy=“msg” />

input 输入框
- type=“text”
- type=“radio”
- type=“checkbox”
- type=“xxxx”
textarea
select

5. 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。

v-if 和 v-show

v-show 的原理是：动态为元素添加或移除style= " display: none; " 样式，从而控制元素的显示与隐藏。
- 如果要频繁的切换元素的显示状态，用 v-show 性能会更好。
v-if 的原理是：每次动态创建或移除 DOM 元素，实现元素的显示和隐藏。
- 如果在运行时条件很少改变，则使用 v-if 较好。

v-if 指令在使用的时候，有两种方式：

直接给定一个布尔值 true 或 false
```
被 v-if 控制的元素
```
给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏
```
良好
```

v-else-if

优秀 
良好 
及格 
不及格

6. 列表渲染指令

基于一个数组来循环渲染一个列表结构。

v-for

v-for 指令需要使用 item in items 形式的特殊语法

items 是源数据 (待循环) 的数组，而
item 被循环的每一项。

【示例】：动态渲染表单数据：

 

  
  
    
      
        索引
        Id
        姓名
      
      
        
        
        
        
        
          {{ index }}
          {{ item.id }}
          {{ item.name }}

索引	Id	姓名
{{ index }}	{{ item.id }}	{{ item.name }}

使用 key 维护列表的状态

官方推荐, 使用 v-for 指令绑定一个:key 属性，key的作用是为了高效的更新虚拟DOM。

key 的值类型，是有要求的：字符串或数字类型
把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
改变 data 顺序，index 会重新排序，所以 index 的值不具有唯一性。

计算属性 computed

实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。

可以被模板结构 (插值、v-bind ) 或 methods 方法使用。

但是在某些情况下，我们可能需要对数据进行一些转化后在显示，或者需要将多个数据结合起来进行显示，这时候我们可以使用计算属性。

实例 1：


  {{getFullName()}}
  {{fullName}}



  const vm = new Vue({
    el: '#app',
    data: {
      firstName: 'lin',
      lastName: 'willen'
    },
    computed: {
      fullName () {
        return this.firstName + ' ' + this.lastName;
      }
    },
     // 使用 methods: 每次都会调用方法
    methods: {
      getFullName () {
        return this.firstName + ' ' + this.lastName;
      }
    }
  })

特点：

定义的时候，要被定义为 “方法”。
在使用计算属性的时候，当普通的属性使用即可
实现了代码的复用，只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值。

实例2：


  总价格：{{totalPrice}}



const vm = new Vue({
    el: '#app',
    data: {
      books:[
        {id: 1001, name: 'Unix编程艺术',price: 119},
        {id: 1002, name: '代码大全',price: 105},
        {id: 1003, name: '深入理解计算机原理',price: 99},
        {id: 1004, name: '现代操作系统',price: 109}
      ]
    },
    computed: {
      totalPrice () {
        
        let totalPrice = 0;
        
        for (let i in this.books) {
          totalPrice += this.books[i].price;
        }
          
        // 也可以使用 for of 
        for (let book of this.books) {
          totalPrice += book.price;
        }
        return totalPrice;
      }
    }
  })

计算属性 vs 方法

methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性

methods: 每次使用都会调用方法
computed: 计算属性会缓存计算的结果, 不变的情况下只调用一次, 除非原属性发生改变，才会重新调用.

计算属性 vs 侦听器

侧重的应用场景不同侧重的应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值。
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。

vue组件

什么是组件化开发？

根据封装的思想，把页面上可重用的 UI 结构封装为组件，方便项目的开发和维护。

vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中组件的后缀名是.vue

组件的构成

每个 .vue 组件都由 3 部分构成，分别是：

template ：组件的模板结构，且每个组件中必须包含template模板结构。
script ：组件的 JavaScript 行为
style ：组件的样式

// 标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式
// scoped 防止样式冲突

script 节点：

（1）script 中的 name 节点

用来定义组件的名称，调试的时候可以清晰的区分每个组件。

（2）script 中的 data 节点

组件渲染期间需要用到的数据， data 必须是函数, 不能直接指向对象数据。

（3）script 中的 methods 节点

组件中的事件处理函数（方法），必须定义到 methods 节点中

注册私有组件

通过 components 注册的是私有子组件，被注册的组件只能用在当前组件中。

1.使用 import 语法导入需要的组件

import Left from '@/components/Left.vue'

2.在 script 标签中使用 components 节点注册组件

3.以标签的形式使用刚才注册的组件

注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component()方法，可以注册全局组件。

import Vue from 'vue'
import App from './App.vue'

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'

// 参数一： 组件的 '注册名称'，将来以标签形式使用时要求和这个名称一样。
// 参数二： 需要被全局注册的那个组件。
Vue.component('MyCount', Count)

// 消息提示的环境配置，设置为开发环境或者生产环境
Vue.config.productionTip = false

new Vue({
  // render 函数中，渲染的是哪个 .vue 组件，那么这个组件就叫做 “根组件”
  render: h => h(App)
}).$mount('#app')

使用：

组件注册时名称的大小写

在 Vue 定义组件注册名称的方式有两种：

短横线命名法，例如 my-swiper 和 my-search
- 使用组件时也必须使用短横线命名
大驼峰命名法，例如 MySwiper 和 MySearch
- 既可以按照大驼峰命名法使用，也可以转化为短横线名称进行使用。

注意：在开发中，推荐使用大驼峰命名法为组件注册名称，因为它的适用性更强。

组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

scoped 属性

让当前组件的样式对其子组件是不生效。

Vue 中提供了在style 节点添加 scoped属性，来防止样式冲突问题：

原理是为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域。

为了提高开发效率和开发体验，直接在 style 节点使用 scoped 属性：

/deep/ 样式穿透

让某些样式对子组件生效。

使用场景：当使用第三方组件库的时候，需要修改第三方组件默认样式的时候。

Class 与 Style 绑定

通过 v-bind动态操作元素样式。

1. 动态绑定 HTML 的 class：

通过三元表达式，动态的为元素绑定 class 的类名：

MyDeep 组件




data(){
	return { isItalic:true }
.thin{
	font-weight:200;
.italic{
	font-style:italic;
}

2. 以数组语法绑定 HTML 的 class

如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式

MyDeep组件

3. 以对象语法绑定 HTML 的 class：

MyDeep组件

4. 以对象语法绑定内联的 style

命名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名：


    Hello world!!







data () {
    return {
      active: 'red',
      fsize: 30, 
      bgcolor: 'pink'
    }
}

自定义属性 props

props是组件的自定义属性，允许使用者通过自定义属性，为当前组件指定初始值，极大的提高组件的复用性。

在组件中声明 prpos

my-article 组件的定义如下：

父组件传递给my-article组件的数据，必须在props节点中声明 :

无法使用未声明的 props

如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用。

动态绑定 props 的值

使用 v-bind 属性绑定的形式，可以为组件动态绑定 props 的值。

<！--通过V-bind属性绑定，为author动态赋予一个表达式的值

props 的大小写命名

组件中如果使用“camelCase (驼峰命名法)”声明了 props 属性的名称，则有两种方式为其绑定属性的值：

使用时既可以用驼峰命名，亦可以用短横线分隔命名的形式为组件绑定属性的值：


// 等价于

props 验证

基础的类型检查 type

props:{
    
   //支持的8种基础类型

   propA:String,    //字符串类型
   propB:Number,    //数字类型
   propC:Boolean,   //布尔值类型
   propD:Array,     //数组类型
   propE:Object,    //对象类型
   propF:Date,      //日期类型
   propG:Function,  //函数类型
   propH:Symbol     //符号类型

  }

多个可能的类型
必填项校验 required

属性默认值 default

props:{
    // 通过数组形式，为当前属性定义多个可能的类型
    type: [String, Number],
    required: true,
    default: 0,
}

自定义验证函数

在封装组件时，可以为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制：

 props:{
   type:{
       // 通过 validataor函数，对type 属性进行校验，属性值 通过val形参接收
     validataor(val){
       // 必须匹配下列字符串中的一个
       return ['success','warning','danger'].indexOf(val) !== -1
     }
   } 
}

prpos 传入不同的初始值

在实际开发中我们经常会碰到下面的情况：

在不同组件使用同一个注册的组件时候希望赋值一个不同的初始值。

1.组件的封装者通过 props 允许使用者自定义初始值：

监听自定义事件

// 父组件


methods : {
	getNewCount(val) {
	console.log('监听到了 count 值的变化', val)
}，

自定义事件传参

在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参:

methods: {
    onBtnClick() {
        this.count t= 1
        this.$emit( 'numchange' , this.count)} // 触发自定义事件,通过第二个参数传参
}

filter 过滤器

在 vue 3.x 的版本中剔除了过滤器相关的功能。

在 vue 3.x 使用计算属性或方法代替被剔除的过滤器功能。

过滤器（Filters）常用于文本的格式化。过滤器可以用在两个地方：双括号插值表达式 和v-bind属性绑定。


{{ message | capitalize }}

私有过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

创建一个私有过滤器，示例代码如下：

const vm = new Vue({
    el: '#app',
    data: {
        message: 'hello world!',
        info: 'title info'
    },
    // 在 filters 节点下定义过滤器
    filters: {
        // 把首字母转换为大写的过滤器
        capitalize (value) {  
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }

全局过滤器

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:

// Vue.filters()方法接收两个参数：
// 第一个参数：过滤器名字   第二个参数：过滤器的处理函数

Vue.filter('capitalize',(str)=>{
    return value.charAt(0).toUpperCase() + value.slice(1)'
} )

调用多个过滤器：

{{ message | filterA | filterB }}

先把 message 的值交给 filterA 处理，再把 filterA 处理结果交给 filterB 进行处理，最终把 filterB 的处理结果，作为最终值渲染到页面上。

过滤器传参

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

// 第一个参数永远是 '管道符' 前面待处理的值，第二个参数开始才是调用过滤器时传递的参数

Vue.filter('filterA',(msg,arg1,arg2)=>{
	// 过滤器的逻辑代码
})

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

{{message | cap | maxl(5)}}


Vue.filter('cap', (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1) + '----'
})

Vue.filter('maxl', (str, len = 10) => {
    if (str.length <= len) return str
    return str.slice(0, len) + '....'
})
var app = new Vue({
    el: '#app',
    data: {
        message: 'hello Vue 2021年10月30日00:07:45!'
    }

过滤器的注意点

在过滤器函数中，一定要有 return 值
在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

label的for属性

使用lable自带的属性进行单选钮的启用和禁用：


已启用
已禁用

watch 侦听器

watch 侦听器 监视数据的变化，从而针对数据的变化做特定的操作。

侦听器的格式

方法格式的侦听器
- 无法在刚进入页面的时候，自动触发！！
- 如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！
对象格式的侦听器
- 可以通过 immediate 选项，让侦听器自动触发！
- 可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！

使用方法格式创建的侦听器：

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

import axios from 'axios'

export default{
    data(){
        return{ username: ''}
    }
},
watch: { 
    // newVal 是'变化后的新值'，oldVal 是'变化之前的旧值'
    async username(newVal,oldVal) {  
        if (newVal === '') return 
        // 使用 axios 发起请求，判断用户名是否可用 
        const { data: res } = await axios.get(`https://www.escook.cn/api/finduser/${newVal}` ) 
        console.log(res) 
    } 
}

使用方法创建时：组件在初次加载完毕后不会调用 watch 侦听器。

immediate 选项

如果想让 watch 侦听器在浏览器打开时立即被调用，则需要使用 immediate 选项。

使用对象格式创建的侦听器：

watch: {
    username: {
        // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
        async handler(newVal,oldVal) {
            if (newVal === '') return
            const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
            console.log(res)
        },
            // 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
            immediate: true
    }
}

使用 handler 定义侦听器函数
immediate控制侦听器是否自动触发，默认值为 false不立即触发。

deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 开启 深度监听。




data: {
   info: {username: 'admin'}
},
watch:{
    // 监听info对象的变化
	info:{
      	handler(newVal){
            console.log(newVal.username)
		},
	// 开启深度监听，监听每个属性值的变化，默认值为 false
	deep: true
	}
}

监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器。

const vm = new Vue({
    el: '#app',
    data: {
        info: {username: 'admin',}
    },
    watch:{
        'info.username':{
            handler(newVal){
                console.log(newVal)
            },
        }
    }
})

组件的生命周期

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期函数的分类

生命周期图示:

需要注意的三个周期函数：

在实际开发中，created 是最常用的生命周期函数！

组件之间的数据共享

父→子

父组件通过 v-bind 属性绑定向子组件共享数据，子组件使用 props接收数据。

// 父组件
// 注册子组件





// 子组件


export default {
	props: [ 'msg' , 'user ']
}

子 → 父

子组件向父组件共享数据使用自定义事件。

// 子组件

export default {
    data() {
        // 子组件自己的数据，将来希望把 count 值传给父组件
        return { count: 0 }
    },
    methods: {
        add() {
            this.count t= 1
            //修改数据时，通过 $emit()触发自定义事件
            this.$emit( 'numchange' , this.count)}
    }
}


// 父组件
App 根组件
子组件传过来的数据是 ： {{ countFromSon }}

兄弟组件数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

EventBus 的使用步骤

创建 eventBus.js模块，并向外共享一个 Vue 的实例对象
在数据发送方，调用 bus.$emit('事件名称', 要发送的数据)方法触发自定义事件。
在数据接收方，调用 bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件。

ref 引用操作DOM

不依赖于 jQuery 和调用 DOM API 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

使用 ref 引用 DOM 元素

<！--使用ref属性，为对应的DOM添加引用名称-->
    
MyRef 组件
获取$refs 引用


methods:{
    getRef(){
    	//通过this.$refs.引用的名称可以获取到DOM元素的引用
        console.log(this.$refs.myh3)
    	//操作DOM元素，把文本颜色改为红色
    	this.$refs.myh3.style.color='red'
}，

使用 ref 引用组件实例

需求：在根组件控制子组件

<！--使用ref属性，为对应的“组件”添加引用名称-->
    
 


methods:{
    getRef（）{
    	// 通过this.$refs.引用的名称可以引用组件的实例
        console.log（this.$refs.counterRef）
    	// 引用到组件的实例之后，就可以调用 子组件上的 methods 方法
        this.$refs.counterRef.add（）
}，

点击文本框自动获得焦点

添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。

this.$nextTick(cb) 方法

$nextTick(cb)保证 cb 回调函数可以操作到最新的 DOM 元素（推迟到下一个 DOM 更新周期之后执行）。

解决我们在页面没有渲染完成前使用 ref 操作DOM元素报错问题。

控制文本框和按钮的按需切换

点击按钮展示文本框，文本框输入时隐藏按钮：

动态组件

实现不同组件之间的按需展示。( 动态切换组件显示和隐藏 ) ，类似于 Vue-Router。

动态组件的基本使用

Vue 提供了一个内置的组件，专门用来实现动态组件的渲染 :

component 标签是 vue 内置的，作用：组件的占位符
通过 :is 属性，动态指定要渲染的组件
- is 属性的值，表示要渲染的组件的名字。
- is 属性的值，应该是组件在 components 节点下的注册名称。
使用 keep-alive保持组件的状态（避免组件切换时重新渲染）。
- keep-alive 会把内部的组件进行缓存，而不是销毁组件。
通过 include 指定哪些组件需要被缓存。
通过 exclude属性指定哪些组件不需要被缓存。

// 点击按钮，动态切换组件的名称

在组件中定义 name 名称：

当提供了 name 属性之后，组件的名称就是 name 属性的值。

export default {
name: ‘MyRight’
}

声明 name 应用场景：结合标签实现组件缓存功能；以及在调试工具中看到组件的 name 名称。

插槽 slot

在签形式使用的组件中内容节点中插入内容。

通过 slot 元素 定义插槽，从而为用户预留内容占位符。
封装组件时，没有预留插槽的内容会被丢弃。

后备内容

在 slot 标签内添加的内容会被作为后备内容。

// 子组件 my-com



// 使用插槽
	
       // 如果用户没有提供内容，上面 slot标签 内定义的内容会生效，此时页面会有 "这是后备内容"
       // 如过提供了，下面的 img 将会被渲染到页面上

具名插槽

// MyArticle 组件

Vue 官方规定，每个 slot插槽，都要有一个 name名称，一个不带 name 的出口会带有隐含的名字“default”。

为具名插槽提供内容

如果要把内容填充到指定名称的插槽中，我们可以在一个