vue--slot插槽的使用方式

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

<body>
  <div class="app">
    <child>   //假注释。。。   这里的span标签会替代子组件child中的slot标签  当child标签中没有任何东西的时候 会显示默认值 就是那句话 
      <span>hehaha</span>
    </child>
  </div>
</body>
<template >
  <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 >
  <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'
  })

代码中有解释了。。。

作用域插槽
上代码

<body>
  <div class="app">
    <child>
      <template slot-scope="props">
        <span>{{ props }}</span>
      </template>
    </child>
  </div>
</body>
<template >
  <div> 
    <!-- 子组件做循环或者子组件中部分结构 需要由外部传入的时候使用作用域插槽 -->
    <!-- 这里循环的每一项都给ite 然后父组件中接收？？？ -->
    <slot v-for="item of list" :ite="item"></slot>
  </div>
</template>
<script>
  Vue.component('child',{
    template:'#tpl',
    data(){
      return{
        list:[1,2,3,4]
      }
    }
  })
  const app = new Vue({
    el:'.app'
  })
</script>

vue--slot插槽的使用方式

相关推荐