Vue【有与无】【F1】大话插槽

  直接上干货

//slot组件，自己实现的插槽，可以想象的比喻成【插座】
<template>
  <div class="slots">
      slot的用法
      <SlotChild>
          <div class="no-name">我是嵌在子组件内不具有属性名的标签</div>
      </SlotChild>
  </div>
</template>

<script>
import SlotChild from 'component/slotChild'
export default {
    name: 'slots',
    components:{
        SlotChild
    }
}
</script>

//slot的子组件，要插入插槽的内容；可以形象的比喻成【插销】
<template>
  <div class="slot-child">
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'slotChild'
}
</script>

页面渲染效果

【小结】插销 插在 插座 上，其他的都插不进去

在slot组件中引入了slot的子组件，而且又在子组件标签内添加了新的标签内容，但页面上并没有将子组件标签内的标签内容显示出来，所以说在不适用slot的情况下，在子组件标签内添加Dom是无效的；

---

我们再进一步深入了解一下

<template>
  <div class="slot-child">
　　　//在子组件中添加slot标签
      <slot></slot>
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'slotChild'
}
</script>

效果图入下

【小结】

将插槽内的插销插到了 <slot> 上，不影响其他的东西的正常形态；

使用slot后可以在子组件内显示插入的新标签内；