Vue核心:插槽

什么是插槽?

插槽是一种传递复杂内容的一种方式，它目前取代了slot和slot-scope，插槽内容vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。

插槽的用法

1.具名插槽

通俗来将具名插槽就是slot指定名称，可以用来定义额外的插槽，容易区分。

1.1 定义组件，定义插槽 name="icon"

Vue.component('todo-item', {
            template: `<li><span><slot name="icon"></slot></span>{{  person.name + person.sex }}</li>`,
            data(){}
        })

1.2 使用插槽

 <todo-item>
          <!--具名插槽：使用template修饰-->
           <template v-slot:icon>
                    这里是一个SvgIcon
           </template>
           <!--具名插槽：使用带有attribute的具名插槽自 2.6.0 起被废弃-->
           <!-- <span slot="icon">这里是一个SvgIcon</span> -->
 </todo-item>

2.作用域插槽

通俗的来讲就是能够访问子组件的数据，这样一来，可以根据子组件的数据做一系列的操作
2.1 定义组件todo-item

Vue.component('todo-item', {
                template: `<li><span><slot :person="person" ></slot></span>{{  person.name + person.sex }}</li>`,
                props: {
                    person: {
                        type: Object
                    }
                }
            })

2.2 使用插槽

<todo-item :person="person">
       <!-- <template v-slot="obj">
             {{ obj.person.age }}
        </template> -->
        <!--也可以这么写，解构形式使用，同样也可以进行重命名-->
        <template v-slot="{person:p}">
             {{ p.age }}
        </template>
 </todo-item>

这样就可以访问子组件中的数据了