vue--slot插槽的使用方式

Posted wangweigit3077

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue--slot插槽的使用方式相关的知识,希望对你有一定的参考价值。

  • slot 插槽可以在子组件中为父组件要传递的标签占位置  能够有效的减少代码冗余  使代码更加有逼格 
    • 第一个例子

 

<body>
  <div class="app">
    <child>   //假注释。。。   这里的span标签会替代子组件child中的slot标签  当child标签中没有任何东西的时候 会显示默认值 就是那句话 
      <span>hehaha</span>
    </child>
  </div>
</body>
<template id="tpl">
  <div> 
    <span>haha</span>
    <slot>当父组件没传值过来 就显示这个</slot>
  </div>
</template>
<script>
  Vue.component(‘child‘,{
    template:‘#tpl‘,

  })
  const app = new Vue({
    el:‘.app‘
  })
</script>
    •   第二个例子
    • <body>
        <div class="app">
          <child>
            <div slot="reserved">reserved---保留的</div>
            <div slot="ww">ww---帅气的</div>
          </child>
        </div>
      </body>
      <template id="tpl">
        <div> 
          <!-- 原本每一个slot插槽都会显示出 child 标签包裹的所有内容   解决这个问题方式就是具名插槽 给上面每一个div 命名slot 值 然后再 slot  插槽中使用name属性绑定命名  -->
            <slot name="reserved">当父组件没传值过来 就显示这个</slot>
            <span>haha</span>
            <slot name="ww">当父组件没传值过来 就显示这个</slot>    
        </div>
      </template>
      <script>
        Vue.component(‘child‘,{
          template:‘#tpl‘,
      
        })
        const app = new Vue({
          el:‘.app‘
        })

      代码中有解释了。。。

 

以上是关于vue--slot插槽的使用方式的主要内容,如果未能解决你的问题,请参考以下文章

vue----slot插槽

vue--slot插槽

436 vue slot:插槽基本使用,具名插槽,作用域插槽

vue slot插槽的使用

vue slot(插槽)

vue slot(插槽)