码迷,mamicode.com
首页 > 其他好文 > 详细

vue--slot插槽的使用方式

时间:2019-02-12 00:06:54      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:type   tag   没有   --   audio   splay   res   替代   属性绑定   

  • 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插槽的使用方式

标签:type   tag   没有   --   audio   splay   res   替代   属性绑定   

原文地址:https://www.cnblogs.com/wangweigit3077/p/10363643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!