vue插槽（前端面试题）

1、slot基本的用法

插槽指允许将自定义的组件像普通标签一样插入内容

import Vue from 'vue'
// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <slot></slot> // 定义插槽
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            }
        }
    }   
}

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123'
        }
    },
    template: `
        <div>
            <com-one>
                <span>{
  {val1}}</span> // 使用插槽
            </com-one>
        </div>
    `
})

2、具名插槽

给具体的插