美文网首页
vue slot插槽

vue slot插槽

作者: 橙小光 | 来源:发表于2020-08-03 17:57 被阅读0次

v-slot 插槽的用法:

单个slot内容时:

子组件:

<slot></slot>

父组件:

<navigation-link>
  Logged in as user
</navigation-link>

多个slot内容时(具名插槽):

子组件:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

相关文章

  • 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/eydbrktx.html