Vue中插槽Slot基本使用与具名插槽详解

<template>
    <div class="app">
        <!-- 内容是button -->
        <show-message title="哈哈哈">
            <button>我是按钮元素</button>
        </show-message>
        <!-- 内容是超链接 -->
        <show-message>
            <a href="#" rel="external nofollow"  rel="external nofollow" >百度一下</a>
        </show-message>

        <!-- 没有值传递 -->
        <show-message></show-message>
    </div>
</template>

<template>
    <h2>{{title}}</h2>
    <div class="content">
        <slot>
            <p>我是默认值</p>
        </slot>
    </div>
</template>

<template>
    <nav-bar>
        <template v-slot:left>
            <button>返回</button>
        </template>

        <template v-slot:center>
            <span>内容</span>
        </template>

        <template v-slot:right>
            <a href="#" rel="external nofollow"  rel="external nofollow" >登录</a>
        </template>
    </nav-bar>
</template>

<template>
    <div class="nav-bar">
        <div class="left">
            <slot name="left">left</slot>
        </div>
        <div class="center">
            <slot name="center">center</slot>
        </div>
        <div class="right">
            <slot name="right">right</slot>
        </div>
    </div>
</template>

//组件调用start
 <ul>
   <slot-demo :userObj="userObj">
	   <template v-slot:footer="message">
	       <div>{{message.userAge}}</div>
	       <div>{{message.userName}}</div>
	       //这里用的message是写组件时在slot标签上定义属性的映射。
	   </template>
   </slot-demo>
 </ul>
 
   data() {
	   return {
		      userObj: {
		          age: 3,
		          name: '张三',
		      },
	    }
  },
//组件调用end
 //书写组件时start
<template>
    <li>
    	//这里的userObj是组件调用是传下来的prop
        <slot name='footer' :userAge="userObj.age" :userName="userObj.name" >
        </slot>
    </li>
</template>

props: {
   userObj: Object,
},
 //书写组件时end