插槽v-slot

2021-02-26  本文已影响0人  媛猿YY

父子组件插槽的使用

父组件product.vue

<template>
<div class="produt">
        <product-param>
            <template v-slot:buy>
                <button class="btn">立即购买</button>
            </template>
            
        </product-param>
    </div>
</template>
<script>
import ProductParam from '../components/ProductParam.vue';
</script>

子组件 ProductParam.vue

<div class="pro-param">
                <a href="javascript:;"></a>概述<span>|</span> <a href="javascript:;"></a>参数<span>|</span>
                <a href="javascript:;"></a>用户评价
                <slot name="buy"></slot>
</div>
上一篇 下一篇

猜你喜欢

热点阅读