Vue.js中slot插槽

<slot></slot> 插槽: 

1.个人理解:组件中,如果我们不使用插槽slot元素,那么我们在组件中放入任何元素或内容都是不会显示,也就是说放入的元素会被抛弃;使用插槽slot可以向组件内部制定位置传递内容;也就是说<slot>显示不现实以及如何显示是父组件来决定的.

2.分类

    2.1  "单个插槽"又叫"匿名插槽"或"默认插槽"

        该插槽可以放到组件的任意位置,但是只能放一个;举例如下

            父组件:

        <template>

            <div class="fu">

                <p>这个是父组件</p>

                    <zi>

                            <div>

                                <p>语文</p>            

                           </div>  

                    </zi>

            </div>

       </template>

子组件:

               <template>

                    <div class="zi">

                        <h3>这里是子组件</h3>

                         <slot></slot>

                   </div>

                </template>

最终显示结果是:

这个是父组件

这里是子组件

语文

PS:这里如果吧子组件里面的slot删除掉,那么就只能看到

这个是父组件

这里是子组件

                                  2.2 具名插槽

        有些时候我们需要多个插槽。但是我们又希望可以找到对应的插槽,官方给我们提供了一个<slot>元素特有的属性name;就是找到对应的插槽以免位置错乱.

                     <div class="container">

•                    <header>
  •                <slot name="header"></slot>
    •         </header>
    •          <main>
    •         <slot></slot>//保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口
    •         </main>
    •        <footer>
    •            <slot name="footer"></slot>
    •         </footer>
    • </div>
  • 个人理解为其实就是使用了name给slot确定了位置,父组件中使用的时候,只要name对应上就可以了.
• 下面说下,作用域插槽 或者说是 带数据的插槽
• PS:作用域插槽,是子组件传递数据给父组件,父组件只用来决定如何展示.
• 作用域插槽要求，在slot上面绑定数据,如下所示
• <slot name="zuoyongyu" :data="data"></slot>

•           export default {

                       data: function(){

                                         return {

                                                     data: [1,2,3,4,5];

                                                   }

                                         },

                                  }

•  

• 子组件

• <template>

              <div class="zi">

                      <h3>这是子组件</h3>

                         // 作用域插槽

                        <slot :data="data"></slot>

                </div>

            </template>

               export default {

                         data: function(){

                                           return {

                                                 data: [1,2,3,4,5];

                                           }

                                     }

                                }

•  

使用

                   <template>

                       <div class="fu">

                      <h3>这是父组件</h3>

                     <!--首先是flex布局展示-->

                    <child>

                         

<!-- 将 `user` 定义为插槽作用域的名字,这里叫什么都可以,都是通过         slot-scope 特性从子组件获取数据： -->

                               <template slot-scope="user">

                         <div class="tmpl">

                         <span v-for="item in user.data">{{item}}</span>

                           </div>

                           </template>

                             </child>

                                   <!--第二次使用：用列表展示数据-->

                                     <child>

                                         <template slot-scope="user">

                                       <ul>

                                            <li v-for="item in user.data">{{item}}</li>

                                        </ul>

                                        </template>

                                         </child>

                                                     </div>

                               </template>

            参考链接:https://cunzaizhuyi.github.io/vue-slot/#more