vue踩坑系列——slot

下图红箭头所指是一个标题组件，样式一样，但是在第二个标题上右侧黑箭头所指有一个更多按钮，此时就要用到slot插槽

标题组件（子组件）代码：

<template>
	<h2 class="tt-title">
		<span class="tt-title-text">{{ title }}</span>
		<slot name="btn"></slot>
	</h2>
</template>

<script type="text/javascript">
	export default {
		name: 'TemplateTitle',
		props: {
			title: {
				default: '1F 热销专区'
			}
		}
	}
</script>

<style type="text/css">
	.tt-title {
		border-left: 0.1rem solid #cf002d;
		font-size: 0.24rem;
		padding: 0.2rem 0;
		position: relative;
	}
	.tt-title-text {
		position: relative;
		left: 0.22rem;
	}
</style>

slot标签将来用作放置'更多'按钮，设置其name为btn

调用标题组件（父组件）代码：

<script type="text/javascript">
	import axios from 'axios'
	import templateTitle from './TemplateTitle'//引入标题组件

	export default {
		name: 'Floor2',
		data() {
			return hmj
		},
		components: {
			'templateTitle': templateTitle//注册标题组件
		},
		methods: {
			'moreBtn': function() {
				hmj.pageindex += 1;
				moreProduct(hmj.pageindex,hmj.pagesize);
			}
		}
	}
</script>

<template>
	<div class="f2-sell">
		<templateTitle title="2F 销售专区">
			<span slot="btn" class="f2-sell-titleBtn" @click="moreBtn">更多</span>
		</templateTitle>
		<!-- <div class="f2-sell-products" v-if="has2Fproducts">
			<dl class="f2-sell-product" v-for="item in items">
				<dt class="f2-sell-productImg" :style='item.styleObject'></dt>
				<dd class="f2-sell-productName">{{ item.name }}</dd>
				<dd class="f2-sell-productPreprice">￥ {{ item.preprice }}</dd>
				<dd class="f2-sell-productPrice">￥ {{ item.price }}</dd>
			</dl>
		</div>
		<p class="f2-sell-NoProduct" v-else>已无更多商品</p> -->
	</div>
</template>

注意看父组件中templateTitle的span标签，设置其slot属性与子组件中slot标签的name属性一致，即可

更多关于slot内容请移步vue文档区：https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容