Vue中插槽的使用

Vue中插槽理解以及使用方法

什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
插槽的三种使用方法
1.普通插槽
插槽允许我们在调用子组件的时候为子组件传递模板。

 <div id='app'>
        <test>
            <template >{{msg}}</template>
        </test>
         <test>
            <template>world</template>
        </test>
      </div>

//子组件
  let test = {
           template:`
            <div>
                <div>
                <!--  普通插槽-->
               <slot></slot>
            </div>
            </div>
           `,
        }
        //根组件
        new Vue({
            el:'#app',
          components:{
              test
          },
          data:{
              msg:'world'
          }
        })

2.具名插槽
在一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名。

 <div id='app'>
        <test>
            <!-- 告诉模版传递参数到哪一个插槽中，通过插槽的名字，进行唯一的确认 -->
            <template v-slot:two>{{msg}}</template>
        </test>
         <test>
            <template v-slot:one>world</template>
        </test>
      </div>

 let test={
                 template:`
                   <div>
                      <div>
                    <!--  给插槽进行命名 -->
                       <slot name='one'></slot> 
                       </div>
                       <div>   
                       <slot name='two'></slot> 
                       </div>   
                   </div>
                 `
             }
             new Vue({
                 el:'#app',
                 components:{
                     test
                 },
                 data:{
                     msg:'hello'
                 }
             })

3. 作用域插槽
   在一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名。

<div id='app'>
        <!-- <test>
             告诉模版传递参数到哪一个插槽中，通过插槽的名字，进行唯一的确认 -->
            <!--<template v-slot:default='aaa'>{{aaa}}
            </template>
        </test> -->
        <!-- 将其结构 -->
        <test v-slot='{user,form}'> 
           <template > 
               {{user}}
               {{form}}
            </template>
        </test>
      </div>

 let test={
                 template:`
                   <div>
                      <div>
                       <slot v-bind:form='form' v-bind:user='user'></slot> 
                       </div> 
                   </div>
                 `,data(){
                     return {
                         form:{
                             username:'tom',
                             age:12
                         },
                         user:'zs'
                     }
                 }
             }
             new Vue({
                 el:'#app',
                 components:{
                     test
                 },
                 data:{
                     msg:'hello'
                 }
             })