美文网首页
Vue slot插槽

Vue slot插槽

作者: 乌特西西 | 来源:发表于2021-04-20 16:15 被阅读0次
// 父元素
<template v-slot:default>
    <div>修改默认slot</div>
</template>
//name 为 default时  也可以忽略不写
// 父元素
<template>
    <div>修改默认slot</div>
</template>
//or
<div>修改默认slot</div>

// 子元素
<slot name="default">默认slot</slot>
//or
<slot>默认slot</slot>


// --------------------------------------
//  v-slot:testSlotName   可简写成  #testSlotName
// 父元素
<template v-slot:testSlotName>
    <div>修改默认slot</div>
</template>
//or
<template #testSlotName>
    <div>修改默认slot</div>
</template>


// 子元素
<slot name="testSlotName">默认slot</slot>

// --------------------------------------
// 父级只负责父级的编译   子级只负责子级的编译
// 父级想修改子级的slot默认值,可以使用 v-bind:<参数名>=""  简写成 :<参数名>=""

// 父元素
<template #user="{user}">
    <div>{{user}}</div>
</template>

// 子元素
<slot name="user" :user="user">默认slot</slot>




相关文章

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

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

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

  • vue中的slot(插槽)

    vue中的插槽————slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定...

  • vue 插槽的使用

    vue 插槽手册 深入理解vue中的slot与slot-scope 插槽的使用其实是很简单首先要明白插槽是使用在子...

  • 18、Vue3 作用域插槽

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

  • vue3-slot-消息框-模态框

    1.前言 1.使用vue3 的slot插槽时,大部分和vue2-slot插槽[https://www.jiansh...

  • slot是什么?有什么作用?原理是什么?

    slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是...

  • slot(插槽)

    slot又称插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是...

  • slot 用法以及使用场景

    Vue的插槽slot,分为3种 匿名插槽 具名插槽 作用域插槽 前两种很好理解,无非就是子组件里定义一个slot占...

  • Vue中Slot的渲染过程

    Vue在通过compiler解析模版中的slot, slot是组件中的插槽,通过解析slot,把slot的name...

网友评论

      本文标题:Vue slot插槽

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