Vue了解笔记

1.什么是Vue？
    Vue是一个渐进式框架,这意味着我们可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验.
    Vue具有很多特点:1.解耦视图和数据;2.可复用的组件;3.前端的路由技术;4.能够进行状态管理;5.虚拟DOM

2.使用Vue
    1.引入Vue.js文件
    2.创建Vue实例对象,将一个具有id/class属性的容器挂载到Vue实例上.
        const app=new Vue({
          el:'#id值(或.class值)',//挂载容器
          data:{
            message:'Hello Vue',//自定义数据,我们将要在容器中使用的数据。
          }

        })
    3.在自定义数据在容器中使用
        <div id="app">
          {{message}}  //这里会自动加载Vue实例对象中的数据,从而输出:Hello Vue
        </div>

3.Vue实例对象所拥有的的属性
    1.el属性:定义Vue实例对象将要管理的DOM容器,语法:el:"#容器id值或.class值"
    2.data属性:定义Vue实例对象的数据对象,自定义的数据、后端传送过来的数据等.语法:data:{自定义数据}
    3.methods属性:定义属于Vue实例对象的方法.语法:methods:{方法名:function(){执行内容}}
    4.

4.什么是MVVM,关于Vue中的MVVM
    MVVM是Model-View-ViewModel的简称.即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
    在Vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图.ViewModel:指的是Vue实例化对象
    ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离

5.Vue的生命周期
    生命周期即实物从诞生到死亡的过程。
    Vue的生命周期钩子函数使用
      钩子函数                      会触发的行为                                                  在此阶段我们可以设置进行的操作
      beforeCreadted        |vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。                  |加loading事件
      created                |vue实例的数据对象data有了，$el还没有                                           |结束loading、请求数据为mounted渲染做准备
      beforeMount            |vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。    |无
      mounted                |vue实例挂载完成，data.filter成功渲染                                           |配合路由钩子使用
      beforeUpdate          |data更新时触发                                                                |无
      updated                |data更新时触发                                                                |数据更新时，做一些处理（此处也可以用watch进行观测）
      beforeDestroy          |组件销毁时触发                                                                 |无
      destroyed              |组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在        |组件销毁时进行提示
    钩子函数的使用例子
        const app=new Vue({
          el:'#app',
          data:{
            ...
          },
          ...
          //使用钩子函数
          created:function(){
            ...进行数据请求操作
          }
        })

基本操作篇
6.插值操作
    mustacher语法,即使用{{}}来进行数据处理,{{变量名/简单的表达式}}
      data:{message:"Hello",num1:2,num2:4}
        {{message}} //Hello
        {{num1+num2}} //6
        {{num1*5}} //10

7.Vue的属性指令
    1.v-once属性指令
        语法:v-once,规定只渲染一次,不进行二次渲染.
          <p v-once>{{message}}</p> //message值只渲染一次,当message值再次发生改变时,页面也不再跟着渲染改变

    2.v-html属性指令
        语法:v-htm="变量名",用来进行文本内容,元素标签内容的渲染.(作用大似{{}}语法)
          data:{a:"<a href="www.baidu.com">百度一下</a>}
          <p v-html="a"></p> //最终在页面渲染出一个点击可跳转的 百度一下

    3.v-text属性指令(不常用)
        语法:v-text="变量名",用来进行数据渲染.输出的内容是纯文本的.
          data:{a:"<a href="www.baidu.com">百度一下</a>}
          <p v-html="a"></p> //<a href="www.baidu.com">百度一下</a>

    4.v-pre属性指令
        语法:v-pre,将内容按照原始样式输出
          data:{message:'Hello'}
          <p v-pre>{{message}}</p> //输出{{message}},并不会进行数据渲染

    5.v-cloak属性指令
        语法:v-cloak,防止使用{{}}语法时,数据未及时渲染而导致出的原始样式显示,如显示出{{message}}
          <style>
            [v-cloak]{
              display:none
            }
          </style>
          <p v-cloak>{{message}}</p>

    6.v-bind属性指令
        语法:v-bind:属性名称="变量名称",动态的绑定属性,并为属性赋值
          data:{url:'http://www.baidu.com'}
          <a v-bind:href="url">百度一下</a> //<a href="http://www.baidu.com">百度一下</a>
        通过v-bind属性指令动态绑定class(对象语法)(常用)
          <p v-bind:class="{类名1:布尔值,类名2:布尔值,类名3:布尔值,...}">颜色变化</p>
        通过v-bind属性指令动态绑定class(数组语法)(不常用)
          <p v-bind:class="["类名1","类名2","类名3",...]">颜色变化</p>
        通过v-bind属性指令动态绑定style(对象语法)(常用)
          <p v-bind:style="{样式名:样式变量名}">样式设置</p>

    7.v-for属性指令
        语法:v-for="(value,key) in 需要遍历的对象/数组",用来循环遍历数据,并进行渲染.
            value:表示遍历到的元素值,如果遍历数组,则表示遍历到的数组值;如果遍历对象,则表示遍历到的值(不是键)
            key:如果遍历数组,则表示数组元素的下标值;如果遍历对象,则表示遍历到的键名
        注意:v-for,在哪里面生成数据,就在哪里面使用v-for,在使用v-for时推荐搭配key属性
          data:{arr:[1,2,3,4,5]}
          <ul>
            <li v-for="(value,index) in arr" :key="index">{{value}}</li> //循坏遍历arr,并将arr中的值通过value传递给li标签
          </ul>

    8.v-on属性指令
        语法:v-on:事件名称="事件执行方法名",该属性用来监听事件的触发
          methods:{sayHello:function(){alert('Hello')}}
          <p v-on:click="sayHello">点我一下</p>
        v-on属性指令的注意事项
            1.v-on监听的事件调用方法不需要参数时,方法后面的小括号可有可无
            2.v-on监听的事件,在写事件调用方法时如果省略了小括号,但是该方法本身是需要一个参数的时候,Vue会默认将浏览器产生的event事件对象作为参数传入到方法中
            3.v-on监听的事件,当我们同时需要获取参数和event事件对象时,我们可以通过在方法括号中设置(正常传参,$event)的方法获取
    9.v-if、v-else、v-else-if属性指令
        语法:v-if="布尔值",当为true时,显示所在处的内容,当为false时,隐藏所在处的内容
        <p v-if="布尔值">你好</p> //当布尔值为true,输出你好,否则不显示
        <p v-else-if="布尔值">我好</p> //当布尔值为true,输出我好,否则不显示
        <p v-else>你不好</p> //当v-if、v-else-if都为false时显示的内容

8.v-on属性指令的常用修饰符
    .stop修饰符
        作用:阻止事件冒泡行为的进行
        语法:v-on:事件类型名.stop="事件执行方法"
    .prevent修饰符
        作用:阻止默认事件的进行
        语法:v-on:事件类型名.prevent="事件执行方法"
    .keyCode修饰符
        作用：监听键盘事件的某个指定行为
        语法:v-on:键盘事件类型.需要监听的键帽名="事件执行方法"
    .once修饰符
        作用：使得监听的某个事件只执行一次
        语法：v-on:事件类型名.once="事件执行方法"

9.属性指令的语法糖(简写方式)
    1.v-on属性指令,用于事件监听
      简写方式: @事件类型="事件执行方法"
        <button @click="btnClick">点击</button>
    
    2.v-bind属性指令,用于动态的绑定属性
      简写方式: :属性名称
        <p :title="v-bind的简写方式">属性指令的简写方式</p>

10.隐藏与显示元素的方法
    1.v-if、v-else、v-else-if属性指令
        语法:v-if="布尔值",当为true时,显示所在处的内容,当为false时,隐藏所在处的内容
        <p v-if="布尔值">你好</p> //当布尔值为true,输出你好,否则不显示
        <p v-else-if="布尔值">我好</p> //当布尔值为true,输出我好,否则不显示
        <p v-else>你不好</p> //当v-if、v-else-if都为false时显示的内容
    
    2.v-show属性指令
        语法:v-show="布尔值",当布尔值为true时,显示元素,当为false时,隐藏与显示元素的方法
        <p v-show="true>我会显示</p>
        <p v-show="false>我会隐藏</p>
    
  注意:v-if与v-show的区别:
      v-if的隐藏是将整个元素删除掉,使元素不存在,当需要显示时,再创建出来;
      v-show的隐藏是设置display:none,元素依然存在。
    当我们需要进行很频繁的隐藏与显示切换时,推荐使用v-show,
    当我们只需要进行几次隐藏与显示的切换时,推荐使用v-if

11.Vue实例对象的计算属性computed
    计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。
    new Vue({
      el:'#app",
      data:{},
      methods:{},
      computed:{...数据处理操作}
    })
    计算属性使用的方法跟methods相似,但是我们在调用计算属性时,不用像methods一样在方法后面添加(),s计算属性computed直接调用方法名。

12.v-model之表单数据的双向绑定
      v-model属性指令用于实现表单数据的双向绑定的实时变化显示。它的实现原理为：1. v-bind绑定一个value属性；2. v-on指令给当前元素绑定input事件
      注意:v-model属性指令只能用于表单
      语法: v-model:"变量名"
      案例:
          data:{message:"v-model的使用"}
          <input type='text' v-model="message"> //在input表单中,会显示出v-model的使用,同时当改变表单中改变内容时,message的内容也会跟着改变.
      
      v-model属性指令的修饰符
          .lazy:让v-model绑定的表单只有在失去焦点或者按下回车键时才更新数据.
              语法：v-model.lazy="变量名"

          .number:让v-model绑定的表单输入中的内容自动转化为数字
              语法：v-model.number="变量名"

          .trim:过滤v-model绑定的表单内容中文本左右两边的空格
              语法：v-model.trim="变量名"

组件篇
13.Vue组件化的实现
    组件化就是将需要实现的功能模块化,将每一个功能单独提取出来。
    Vue组件的使用步骤:1.创建组件构造器(调用Vue.extend()方法创建);2.注册组件(调用Vue.component()方法注册);3.使用组件(在Vue实例对象范围内使用组件)
        1.全局组件的实现(可以在多个Vue实例对象中使用)
            (1)创建组件构造器对象
                const 组件构造器名=Vue.extend({
                  template:`组件需要实现的功能(即自定义的html模板;注意,该模板内容需要一个容器包裹,如div,section等)`
                });
            (2)注册组件
                Vue.component('自定义组件名',组件构造器名);
            (3)使用组件
                <div id="app">
                  <自定义组件名></自定义组件名>
                </div>
        2.局部组件的实现(只能在其注册的Vue实例对象中使用)
            (1)创建组件构造器对象
                const 组件构造器名=Vue.extend({
                  teplate:`该组件实现的html功能模板(注意,该模板内容需要一个容器包裹,如div,section等)`
                });
            (2)在Vue实例对象的components属性中注册局部组件
                new Vue({
                  el:'#app',
                  data:{},
                  components:{
                    自定义组件名:组件构造器对象名
                  }
                })

14.父子组件的构造方式

 <body>
        <div id="app">
          <!-- 4.在Vue实例对象控制范围内使用组件 -->
          <coms2></coms2>
        </div>

        <script>
          //1.创建组件构造器一(子组件)
          const coms1 = Vue.extend({
            template: `
            <div>
              <h1>我是组件构造器一</h1>
              <small>我将成为组件构造器二的子组件</small>
            </div>
            `
          });

          //2.创建组件构造器二(父组件)
          const coms2=Vue.extend({
            template: `
            <div>
              <h1>我是组件构造器二</h1>
              <small>我将成为组件构造器一的父组件</small>
              <coms1></coms1>
            </div>
            `,
            //将组件构造器一在组件构造器二这里注册,使其成为组件构造器二的子组件,并在组件构造器二的html模板中使用注册的组件
            components:{
              coms1,
            }
          })
          new Vue({
            el: '#app',
            data: {},
            components:{
              //3.将组件构造器二在Vue实例对象中注册,使组件能够在Vue实例范围内使用(爷组件)
              coms2,
            }
          });
        </script>
      </body>

15.组件创建的语法糖(即：简写方式，推荐使用)
      1.全局组件创建的语法糖(简写方式)
          (1)创建并注册组件
              Vue.component('自定义组件名',{
                  template:`该组件实现的html功能模板(注意,该模板内容需要一个容器包裹,如div,section等)`
              });
          (2)在Vue实例对象范围内使用组件
                <div id="app">
                  <自定义组件名></自定义组件名>
                </div>

      2.局部组件创建的语法糖(简写方式)
          (1)创建并注册组件
              new Vue({
                el:'#app',
                data:{},
                components:{
                  '自定义组件名':{
                    template:`该组件实现的html功能模板(注意,该模板内容需要一个容器包裹,如div,section等)`
                  }
                }
              })
          (2)在Vue实例对象控制范围内使用组件
              <div id="app">
                <自定义组件名></自定义组件名>
              </div>

16.组件创建时html内容模板的分离方法
      方法一:
            通过script标签进行分离,将script标签类设置为text/x-template,并设置一个id属性,将这个id属性与组件创建时的template属性绑定在一起,用于与组件产生联系;在这个script标签中,编辑我们需要组件实现的页面功能
            案例:
                <script type="text/x-template" id="coms">
                    ...自定义的组件实现功能
                </script>
                <script>
                    Vue.component('自定义组件名称',{
                      template:'script标签的id值',
                    })
                </script>

      方法二:
            通过<template>标签进行分离,我们在<template>标签里编辑组件需要实现的功能,然后通过在组件创建时为组件的template属性绑定<template>标签的id值来进行联系(推荐使用这种方式)
            案例:
                //1.定义模板
                <template id="con">
                  ...自定义组件实现功能
                </template>
                //2.创建组件并挂载模板
                <script>
                  Vue.component('自定义组件名',{
                    template:'#con',
                  })
                </script>
                //3.使用组件
                  <自定义组件名></自定义组件名>
          
17.组件自身用于数据存放的data属性
      组件自身也有一个data属性,这个data属性用于设置一些动态数据,让我们能够在html模板标签template中使用,但是这个data属性必须是一个函数类型,在函数内部我们通过返回一个对象的方式获取到组件自身定义的数据。
      语法:
          Vue.component('自定义组件名',{
            template:'#con",
            data:function(){
              return {
                ...自定义数据
              }
            }
          })
      语法糖:
          Vue.component('自定义组件名',{
            template:'template模板标签的id值',
            data(){
              return {
                ...自定义数据
              }
            }
          })

组件之间的通信   
18.组件的通信————父组件向子组件传递消息
      方法:通过子组件的props属性进行传递.
          props属性设置数据内容变量的定义方式有两种方式:
                    方式一： 字符串数组类型,数组中的字符串就是用于接收父组件所传数据的自定义变量名称(这种方式不常用)
                              props:['自定义存储变量名1','自定义存储变量名2',...]
                    方式二： 对象类型,使用对象类型的定义方式我们可以设置父组件传递数据的类型,也可以设置自定义存储变量名的默认值等(推荐使用这种方式)
                            props:{
                              自定义存储变量名1:{
                                type: xxx //规定父组件传递的数据必须是什么类型
                                default: xxx //规定父组件没有传递数据时该变量的默认值.
                                required:布尔值 //规定该属性是否必须传递数据
                              },
                              自定义存储变量名2:{
                                type:Array/Object,
                                default:function(){
                                  //当设置的类型为数组或者对象时,默认值这里必须是一个函数,通过函数的返回值来设置默认值
                                  return [...]/{...}
                                },
                                required:布尔值
                              }                            }
      通信步骤:
          (1)创建一对父、子组件。
          (2)在父组件的data属性中准备需要传递的数据;在子组件的props属性中设置一个变量用于接收父组件的数据。
          (3)在使用自定义组件时,在组件名称上通过v-bind绑定子组件的props属性中的变量名,值为父组件中的数据变量名。(这里数据就实现了数据信息的传递工作)
              <组件名 v-bind:子组件自定义存储变量名="父组件数据变量名"></组件名>
          (4)在子组件的html实现功能template模板中使用props属性中设置的相应的自定义变量(这里就是使用从父组件获取到的数据)
      实例：
           

 <body>
              <div id="app">
                <!-- 4.使用组件,通过v-bind属性指令将父组件的数据传递给子组件 -->
                <cmpn v-bind:cperson="person"></cmpn>
              </div>

              <!--1. 定义子组件需要实现的功能 -->
              <template id="cpn">
                <div>
                  <h1>{{title}}</h1>
                  <!-- 3.预先将父组件传递过来的数据在子组件中渲染使用 -->
                  <ul>
                    <li v-for="item in cperson">姓名:{{item.name}}————年龄:{{item.age}}————祖籍:{{item.address}}</li>
                  </ul>
                </div>
              </template>

              <script>
                //1.定义一个子组件构造器
                const cmpn = Vue.extend({
                  template: '#cpn',
                  data() {
                    return {
                      //定义子组件自己的数据
                      title: '组件间的通信——父传子'
                    }
                  },
                  props:{
                    //2.定义变量cperson用于接收父组件传递过来的数据内容
                    cperson:{
                      type:Array,//定义父组件所传递的数据类型为数组类型
                      default:function(){ //定义父组件没有传递数据时的默认值为一个空数组
                        return []
                      },
                      required:true //定义父组件必须传递数据
                    }
                  }
                })

                //1.创建一个Vue实例对象作为父组件
                const vm=new Vue({
                  el: '#app',
                  data: {
                    //2.设置父组件需要传递的数据内容
                    person: [{
                        name: '孙悟空',
                        age: 20,
                        address: '花果山'
                      },
                      {
                        name: '白骨精',
                        age: 18,
                        address: '白骨洞'
                      },
                      {
                        name: '唐三藏',
                        age: 20,
                        address: '长安城'
                      }
                    ]
                  },
                  components: {
                    //1.将子组件挂载到父组件上
                    cmpn
                  }
                });
              </script>
            </body>

19.组件的通信————子组件向父组件传递消息
      实现方法:子组件向父组件中传递消息通过自定义事件。即子组件通过在自身的事件执行方法中使用this.$emit('自定义事件名称',需要传递的内容),这个方法,在组件使用时监听自定义事件,从而在父组件中处理自定义事件的带参数的执行方法来进行信息传递。
          通信步骤:
              (1)子组件自身触发事件,在这个事件执行方法中通过调用this.$emit('自定义事件名称',传递的信息内容)这个方式向父组件发送信息
              (2)在Vue实例范围内使用组件时,在组件上通过v-on监听子组件中设置的自定义事件,事件的执行方法在父组件中定义,在父组件中处理自定义事件的带参数执行方法(这个参数用于接收传递过来的信息)。
          通信步骤详解:
              //1.创建Vue实例对象;创建子组件构造器对象,设置子组件实现功能;将组件构造器对象挂载到Vue实例对象上,构成父子组件.
              //2.在子组件中设置触发信息传递的事件,通过子组件的事件执行方法调用this.$emit("自定义事件",所传内容)这个方法进行通信传递
              //3.在Vue实例对象控制范围内使用子组件,同时监听子组件中设置的自定义事件,并调用父组件的执行方法;通过父组件的带参数执行方法处理子组件传递过来的信息。
          案例：
               

 <body>
                  <div id="app">
                    <!--3.在Vue实例对象控制范围内使用子组件,同时监听子组件中设置的自定义事件,并调用父组件的执行方法-->
                    <cpmn v-on:cinfo="info"></cpmn>
                  </div>

                  <!--1.设置子组件实现功能 -->
                  <template id="cpn">
                    <div>
                      //2.在子组件中设置触发信息传递的事件
                      <button v-for="item in classify" v-on:click="btnClick(item)">{{item.name}}</button>
                    </div>
                  </template>
                  <script>
                    //1.创建子组件构造器对象
                    const cpmn = Vue.extend({
                      template: '#cpn',
                      data() { //设置子组件的数据
                        return {

                          classify: [{
                              id: 1,
                              name: '动漫'
                            },
                            {
                              id: 2,
                              name: '数码'
                            },
                            {
                              id: 3,
                              name: '舞蹈'
                            },
                            {
                              id: 4,
                              name: '音乐'
                            },
                            {
                              id: 5,
                              name: '游戏'
                            }
                          ]
                        }
                      },
                      methods: {
                        //2.通过子组件的事件执行方法调用this.$emit("自定义事件",所传内容)这个方法进行通信传递
                        btnClick(item) {
                          // console.log(item)
                          this.$emit('cinfo', item);
                        }
                      }
                    })

                    //1.创建Vue实例对象
                    const vm=new Vue({
                      el: '#app',
                      data: {},
                      methods: {
                        //3.通过父组件的带参数执行方法处理子组件传递过来的信息
                        info(item) {
                          console.log(item.name)
                        }
                      },
                      components: {
                        //1.将组件构造器对象挂载到Vue实例对象上,构成父子组件
                        cpmn,
                      }

                    });
                  </script>
                </body>

组件之间的访问方式
20.组件间的访问———父组件访问子组件
      父组件访问子组件通过this.$children或者this.$refs(推荐使用这种方法)
          this.$children方法返回值是一个伪数组,数组里面的元素为在父组件下挂载注册的子组件(即:[子组件1,子组件2,子组件3,...])。当我们需要在父组件中调用某个子组件的方法或者变量,属性时。使用:this.$children[该子组件的下标].需要调用的方法或者函数 这种形式来使用.
          this.$refs方法是一个对象类型,在默认情况下是一个空对象,只有当我们在组件标签中添加 ref="自定义组件标识名" 属性时,我们才可以通过 this.$refs.自定义组件标识名.需要调用的子组件方法/变量/函数... 这种方式访问子组件.
      案例:
         

<body>
            <div id="app">
              <coms></coms>
              <button @click="btnChild">点击</button>
              <hr>
              <!-- 为组件绑定ref属性 -->
              <coms ref="ctitle"></coms>
              <button @click="btnChild2">点击</button>
              
            </div>

            <!-- 设置子组件功能模板 -->
            <template id="con">
              <div>
                <h1 v-if="flag">{{title}}</h1>
                <h1 v-else>{{title2}}</h1>
                <p>组件间的访问方式</p>
              </div>
            </template>
            <script>
              //创建子组件构造器对象
              const coms = Vue.extend({
                template: '#con',
                //设置子组件数据
                data() {
                  return {
                    title: '通过this.$children或者this.$refs来进行父组件访问子组件',
                    title2:'我是使用this.$refs方法进行访问子组件的',
                    message: '我是使用this.$children方法来访问子组件的',
                    flag:true
                  }
                },
                methods: {
                  changTitle() {
                    this.title = this.message;
                  },
                  changFlag(){
                    this.flag=!this.flag
                  }
                }
              })
              //创建一个Vue实例对象作为父组件
              const vm = new Vue({
                el: '#app',
                data: {

                },
                methods:{
                  btnChild(){
                    console.log(this.$children)
                    //在父组件中调用子组件的changTile这个方法.
                    this.$children[0].changTitle()
                  },
                  btnChild2(){
                    console.log(this.$refs)
                    this.$refs.ctitle.changFlag()
                  }
                },
                components:{
                  coms,
                }
              });
            </script>
          </body>

21.组件间的访问————子组件访问父组件、子组件访问根组件(即Vue实例对象)
      子组件访问父组件通过this.$parent,子组件访问根组件(即Vue实例对象)通过this.$root
          调用方法为:
              this.$parent.需要调用的父组件变量/函数/方法等名称
              this.$root.需要调用的根组件变量/函数/方法等名称插槽的使用
22.单个插槽(匿名插槽)的基本使用
      在默认情况下,我们在使用组件时,在组件标签中嵌套其他标签是没有作用的.当我们使用了插槽后,就可以在组件标签中嵌套其他标签元素.
      插槽的作用:使得我们封装的组件更加具有扩展性,可以让使用者决定组件内部应该展示什么内容.
      插槽使用步骤:
          (1)只需在组件的功能实现模板中添加一个<slot></slot>空标签我们便可在组件标签中嵌套其他标签渲染其他内容;我们也可以在插槽标签<slot></slot>中嵌套设置我们需要默认显示的内容,这并不影响我们在组件标签中嵌套其他内容(在组件标签中设置的元素会覆盖插槽中默认的元素)
              <slot></slot> //空slot标签,无默认值,使用组件时,无渲染内容
              <slot><button>点击</button></slot>  //具有默认值button元素的的slot标签,当我们在使用组件时,如果没有在组件标签中嵌套添加新的内容时,会默认显示该button标签元素;如果我们在组件标签中嵌套了其他元素标签,则显示我们嵌套的其他元素标签内容
          (2)在使用组件时,在组件标签中嵌套需要额外显示的元素标签即可
      案例:
         

<body>
            <div id="app">
              <coms></coms>
              <hr>
              <coms><p>插槽标签的作用产生了...</p></coms>
            </div>

            <!-- 编辑组件实现的功能 -->
            <template id="con">
              <div>
                <h1>{{message}}</h1>
                <!-- 为组件设置一个插槽,并为插槽设置一个默认显示的元素标签 -->
                <slot><input type="text"></slot>
              </div>
            </template>
            <script>
              //创建一个组件构造器对象
              const coms = Vue.extend({
                template: '#con',
                data() {
                  return {
                    message: '组件普通插槽的使用'
                  }
                }
              })
              new Vue({
                el: '#app',
                data: {},
                methods: {},
                components: {
                  //注册挂载组件
                  coms,
                }
              });
            </script>
          </body>

          
23具名插槽的基本使用
      作用:替换使用指定的插槽模板内容(修改指定插槽中设置的默认值)
      使用方法:
              1.Vue2.6.0版本之前的使用方式 
                  (1)为<slot></slot>标签添加一个name属性
                      <slot name="自定义值">设置的默认显示内容</slot>
                  (2)在组件标签中嵌套其他内容标签时,为该标签添加一个slot属性,值为指定替换的插槽的name属性的值.
                      <组件名>
                        <嵌套的内容标签 slot="name属性值">渲染的内容</嵌套的内容标签>
                      </组件名>
              2.Vue2.6.0之后版本的新使用方式：插槽的引用现在通过 v-slot:slot标签的Name属性值(即：v-slot ：插槽名称) 这种形式来使用
                注意:v-slot 只能添加到 <template> 或自定义组件上
                  (1)为<slot></slot>标签添加一个name属性
                      <slot name="自定义值">设置的默认显示内容</slot>
                  (2)在组件标签中添加一个具有 v-slot:v-slot:对应的slot标签的name属性值(不添加双、单引号)  的template标签,然后在该标签里编辑需要渲染的内容即可
                      <自定义组件标签>
                          <template v-slot:对应slot标签的name属性值>要渲染的内容及其元素标签</template>
                      </自定义组件标签>
      案例:
         

<body>
            <div id="app">
              <coms></coms>
              <hr>
              <coms>
                <span slot="left"></span>
              </coms>
              <hr>
              <coms>
                <button slot="center">充钱</button>
              </coms>
            </div>

            <!-- //组件实现功能模板 -->
            <template id="con">
              <div>
                <h1>具名插槽的使用</h1>
                <div>
                  <slot name="left"><a href="">返回</a></slot>
                  <slot name="center"><input type="text" placeholder="请输入内容..."></slot>
                  <slot name="right"><a href="">登录</a></slot>
                </div>
              </div>
            </template>
            <script>
              const coms=Vue.extend({
                template:'#con'
              })
              new Vue({
                el: '#app',
                data: {},
                components:{
                  coms,
                }
              });
            </script>
          </body>

24.作用域插槽的基本使用
      作用:在父组件里面替换插槽里默认渲染的内容,但是替换的内容由子组件自己来提供(即：在父组件里使用子组件里面的数据内容去替换子组件功能模板中插槽内渲染的数据内容)
      使用方式:
          1.Vue2.6.0版本以及之前使用的方法
                (1)为子组件功能模板中的插槽标签<slot>通过v-bind绑定一个自定义属性,属性的值为子组件data属性中使用的数据
                (2)在使用组件时,在组件中嵌套一个template标签,为该template标签添加一个属性slot-scope,值为自定义名称.
                (3)获取到的 "自定义名称(步骤2设置的).自定义属性(步骤1设置的)" 就是子组件中的数据,然后我们可以对这个数据进行处理,渲染我们想要的内容
            案例:
               

 <body>
                  <div id="app">
                    <!-- 正常使用组件 -->
                    <coms></coms>

                    <!-- 使用组件,并改变组件渲染内容的方式 -->
                    <!-- 通过为template标签添加属性slot-scope,值为自定义名称。得到的 "自定义名称.自定义属性" 就是子组件传递过来的数据,在template标签内容处理 "自定义名称.自定义属性",渲染为我们想要的内容-->
                    <coms>
                      <template slot-scope="tdata">
                        <p v-for="item in tdata.cdata">我要学习：{{item}}</p>
                      </template>
                    </coms>
                  </div>

                  <!-- //定义子组件功能 -->
                  <template id="con">
                    <div>
                      <h1>测试作用域插槽</h1>
                      <!-- 通过为slot标签使用v-bind绑定自定义属性,值为需要传递的信息,这种方式将子组件的数据传递出去 -->
                        <slot v-bind:cdata="classify">
                          <ul>
                            <li v-for="item in classify">{{item}}</li>
                          </ul>
                        </slot>
                    </div>
                  </template>
                  <script>
                    //创建子组件构造器
                    const coms=Vue.extend({
                      template:"#con",
                      data(){
                        return {
                          //定义子组件自己的数据
                          classify:['JavaScript','C++','Vue','Go','Java']

                        }
                      }
                    })
                    new Vue({
                      el: '#app',
                      data:{},
                      components:{
                        //挂载注册子组件
                        coms,
                      }
                    });
                  </script>
                </body>

          (2)2.6.0之后版本使用的方式
                (1)为子组件功能模板中的插槽标签<slot>通过v-bind绑定一个自定义属性,属性的值为子组件data属性中使用的数据
                (2)在使用组件时,在组件中嵌套一个template标签,为该template标签添加一个属性 v-slot:插槽的名称="自定义接收数据的容器"。
                (3)对 自定义接收数据的容器.自定义属性 进行处理,进行我们需要的渲染
            案例:
               

<body>
                  <div id="app">
                    <!-- //正常使用组件 -->
                    <coms></coms>
                    <!-- 修改组件渲染的内容的方式 -->
                    <coms>
                      <template v-slot:cname="rdata">
                        <div>
                          <table>
                            <thead>
                              <tr>
                                <th>姓名</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr v-for="item in rdata.cdata">
                                <td>{{item}}</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </template>
                    </coms>
                  </div>

                  <!-- //编辑子组件功能 -->
                  <template id="con">
                    <div>
                      <h1>子组件实现功能</h1>
                      <slot name="cname" v-bind:cdata="person">
                        <div>
                          <ul>
                            <li v-for="item in person">{{item}}</li>
                          </ul>
                        </div>
                      </slot>
                    </div>
                  </template>
                  <script>
                    //创建子组件构造器
                    const coms = Vue.extend({
                      template: '#con',
                      data() {
                        return {
                          person: ['孙悟空', '白骨精', '唐三藏', '观世音']
                        }
                      }
                    })
                    new Vue({
                      el: '#app',
                      data: {},
                      components: {
                        coms
                      }
                    });
                  </script>
                </body>