美文网首页
插槽v-slot

插槽v-slot

作者: 媛猿YY | 来源:发表于2021-02-26 12:27 被阅读0次

父子组件插槽的使用

父组件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>

相关文章

  • vue3中的插槽

    插槽 默认插槽 具名插槽,v-slot可以简写为# 动态插槽 #[dynamicSlotName] 作用域插槽(...

  • 插槽

    默认插槽: 具名插槽:slot name='footer' 作用域插槽:v-slot===slot-scope 默...

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • vue slot插槽

    v-slot 插槽的用法: 单个slot内容时: 子组件: 父组件: 多个slot内容时(具名插槽): 子组件: ...

  • vue插槽

    vue插槽使用 1.基本插槽实现父级设置 子级设置 2、使用name设置插槽显示隐藏父组件使用v-slot绑定 子...

  • vue插槽slot详解

    插槽分类:具名插槽与作用域插槽。在新版中(2.6.0)统一都叫v-slot指令,老版中称之为slot与slot-s...

  • 【转发】具名插槽简写和作用域插槽

    10. [组件]具名插槽简写和作用域插槽 在父模板中确定插槽位置时,使用了v-slot:one这种方法,其实这个语...

  • vue 插槽slot

    具名插槽 使用的时候将需要的内容写在template标签中,并且通过v-slot:name(name表示插槽的名字...

  • Vue 插槽slot和作用域插槽slot-scope

    什么插槽 官网说明: 在 2.6.0中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指...

  • 18、Vue3 作用域插槽

    作用域插槽:让插槽内容能够访问子组件中,vue2中作用域插槽使用slot-scope,vue3中使用v-slot ...

网友评论

      本文标题:插槽v-slot

      本文链接:https://www.haomeiwen.com/subject/iesmfltx.html