插槽 slot

提示组件、因为父传值props不支持超文本，所以文本-利用props、超文本-slot插槽

1.后备插槽

 <tips><p>请登录后再操作</p></tips>
Vue.component('tips', {
    // 声明组件数据
    template: `
        <div style="width: 370px; line-height: 45px;border:solid 2px red;">
            <slot></slot>
        </div>
    `
})

2.具名插槽

<div id="app">
    <app>
        <!-- 留心：冒号后面切记切记切记没让你加引号 -->
        <template slot='head'>  this is head  </template>

        <template v-slot:footer>  this is footer </template>

        <template> 其他情况 </template>
    </app>
</div>
<script>
Vue.component('app', {
    template: `
        <div>
            <slot name="head"></slot>

            <slot name="footer"></slot>

            <slot></slot>
        </div>
    `
})

3.作用域插槽

<div id="app">
    <app>
        <!-- 留心：冒号后面切记切记切记没让你加引号 -->
        <template v-slot:head="item"> 
            this is head  {{item}}  {{item.a}}   //item：张三 18 、item.a  ：张三
        </template>

    </app>
</div>
<script>
Vue.component('app', {
    // 声明组件模型数据
    data() {
        return {
            uname: "张三",
            age: 18
        }
    },
    // 声明组件内容
    template: `
        <div>
            <slot name="head" v-bind:a="uname"></slot>
        </div>
    `
})