Oliver's Blog

Vue插槽使用

  • Jul 11, 2021

一般插槽

子组件

List.vue

<template>
  <div>
    <!-- 可以在slot元素中增加默认内容 -->
    <slot></slot>
  </div>
</template>

父组件使用子组件，元素体的所有内容都会替换子组件的slot元素位置处

<template>
  <div id="app">
    <List>
        <span>content</span>
    </List>
  </div>
</template>

具名插槽

子组件

List.vue

<template>
  <div>
    <slot name="headerSlot"></slot>
    <slot></slot>
    <slot name="footerSlot"></slot>
  </div>
</template>

父组件使用子组件，按照slot属性对应插槽，无名称的一般插槽与上文描述的规则一致

<template>
  <div id="app">
    <List>
      <template slot="headerSlot">
        <h1>Oliver</h1>
      </template>
      
      <div>content</div>
      
      <template slot="footerSlot">
        <h4>Powered by Oliver</h4>
      </template>
    </List>
  </div>
</template>

Vue 2.6.0以后的新语法

<template>
  <div id="app">
    <List>
      <template v-slot:headerSlot>
        <h1>Oliver</h1>
      </template>
      
      <div>content</div>
      
      <template v-slot:footerSlot>
        <h4>Powered by Oliver</h4>
      </template>
    </List>
  </div>
</template>

作用域插槽

子组件，将需要被父组件访问的属性放在slot元素中

List.vue

<template>
  <div>
    <slot name="headerSlot" :name="name"></slot>
  </div>
</template>

<script>
  export default {
    data() {  
      return {  
        name: 'Oliver'
      }
  }
</script>

父组件使用slot-scope，通过指定的指示符可访问子组件放在slot元素中的属性


<template>
  <div id="app">
    <List>
      <template slot="headerSlot" slot-scope="headerSlotObj">
        <h1>{{headerSlotObj.name}}</h1>
      </template>
    </List>
  </div>
</template>

Vue 2.6.0以后的新语法


<template>
  <div id="app">
    <List>
      <template v-slot:headerSlot="headerSlotObj">
        <h1>{{headerSlotObj.name}}</h1>
      </template>
    </List>
  </div>
</template>

子组件，只有默认插槽

List.vue

<template>
  <div>
    <slot :name="name"></slot>
  </div>
</template>

<script>
  export default {
    data() {  
      return {  
        name: 'Oliver'
      }
  }
</script>

Vue 2.6.0以后的新语法，缩写


<template>
  <div id="app">
    <List v-slot="headerSlotObj">
      <h1>{{headerSlotObj.name}}</h1>
    </List>
  </div>
</template>
Search