Vue 之 Slot - 爱码网

slot在vue中称之为插槽
展示:
       没有使用slot
Vue 之 Slot
       使用slot

理解：
       在组件中，使用

<slot> </slot>

标签进行占位，如下代码
子组件中的templat

<template>
  <div class="div">
    <slot name='test'>
    
    </slot>
    <span>
      这个是常规内容第一项
    </span>
    <slot name='ee'>
     
    </slot>
    <span>
      这个是常规内容
    </span>
  </div>
</template>

这里我使用了两个slot标签占位，而且还是具名插槽 占了页面中的两个位置

作用：
插槽位置将会展现我从父组件传过来的demo

在我没传demo之前，父组件是这样
HTML

<template>
  <div class="hello">
    <Sllot >
    </Sllot>
    <h1>{{ msg }}</h1>
  </div>
</template>

js

<script>
import Sllot from './sllot'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    Sllot
  }
}

页面
Vue 之 Slot

开始在父组件中传入demo, 在子组件插槽位置显示
HTML

<template>
  <div class="hello">
    <Sllot >
      <h1 slot='ee'>不好，真的不好</h1> // 这内容将会在 name=ee 的slot位置展示
      <h6 slot='test'>不sdfsdf好，真的不好</h6> 这内容将会在 name=test 的slot位置展示
    </Sllot>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

js没有变动，就不上了

页面开始变化了
Vue 之 Slot
我在子组件Sllot中传入的demo分别展示在之前我写的slot（插槽）位置

所以插槽可以让我们更好的布局。

它的作用对于在页面局部更改样式非常有效