组件的进阶

组件中的插槽是比较复杂的，而且在后期使用的频率页是很高

总得的来 一共有三种形式和方法 

第一种：

                

默认插槽

                默认插槽很简单 就是说如果父组件 没有传数据，这时子组件就会显示默认的内容

                如果父组件 穿了内容数据  则会覆盖到子组件的内容数据

                        样例：

                        

                          <!-- 这是默认插槽的学习内容 -->

                         

    这是简单的默认插槽  在需要的地方直接引用 即可以显示 组件中的内容
    <pannle>            
     这是父组件给子组件传的东西
    </pannle> -->

第二种 

       

 命名插槽 具名插槽

                具名插槽就是在 一个子组件中存在这个多个slot 这时候需要根据不同的要求 传递给

                不同的slot不同的数据 内容  这时候就需要用上具名组件

                语法上的规定是 在slot中需要进行具名（绑定类型name:""进行区别）

                在父组件进行传值的时候 需要在引用的子组件中 加上<template></template>

                标签  并且在这个标签上绑定需要对应的slot的name的名称

                样例：

                

  
<!-- <template  #h_1>      //这是组件的名称  用的是组件绑定的缩写方式 绑定为名字为h_1
            <h1>父组件传过来的</h1>       //这是组件的内容部分
        </template>
     
        <template v-slot:h_2>           //绑定名字为h_2  这是全写的方式 咩有缩写
            <h2>这是父组件传过来的二级标签</h2>
        </template>
        
        <template v-slot:h_3>         //绑定名字为h_3
            <!-- <a href="http://www.baidu.com">tiaozhuan</a> -->
            <!-- 父组件给子组件传递跳转链接可以 -->
            <!-- <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""> -->
            <!-- 父组件给子组件传递图片也是可以 -->
            <!-- <button>点击</button>  <input type="text">  传递标签也是可以的 -->
        <!-- </template> --> -->                                   

                

                        <!-- 这是具名插槽 因为是针对不同的slot 传递不同的数据

                        所以每一个数据 都要对应着每一个name  包裹在<tem中

                        同样的这里的v-slot 有一种简写的方式  v-slot =>  # 可以用#来代替 -->

        <!-- <template  #h_1>

            <h1>父组件传过来的</h1>

        </template>