vue踩坑系列——slot

来源：互联网发布：mac关闭icloud drive 编辑：程序博客网时间：2024/05/29 04:42

下图红箭头所指是一个标题组件，样式一样，但是在第二个标题上右侧黑箭头所指有一个更多按钮，此时就要用到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#使用插槽分发内容

阅读全文

0 0