vue中的插槽

1、具名插槽

父组件:
	<template>
  <div>
    <div>
      <h1>我是头部</h1>
      <slot name="head"></slot>
    </div>

    <div>
      <h1>我是尾部</h1>
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>
子组件:
	<template>
  <div id="app">
    <Index>
      <template v-slot:footer>
        <p>这里是footer</p>
      </template>
      <template v-slot:head>
        <p>这里是head</p>
      </template>
    </Index>
  </div>
</template>
<script>
import Index from './components/index.vue'
export default {
  name: 'app',
  components: {
    Index
  }

}
</script>
接下来我们将子组件插槽的名字调换一下,父组件不变
<template>
  <div id="app">
    <Index>
      <template v-slot:head>
        <p>这里是head</p>
      </template>
        <template v-slot:footer>
        <p>这里是footer</p>
      </template>
    </Index>
  </div>
</template>
<script>
import Index from './components/index.vue'
export default {
  name: 'app',
  components: {
    Index
  }

}
</script>
由此看出,即使父组件对插槽的填充的顺序打乱,只要名字对应上了,就可以正确渲染到对应的插槽中。即: 父组件填充内容时,是可以根据这个名字把内容填充到对应插槽中的

2、默认插槽(默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到默认插槽中)

<template>
  <div id="app">
    <Index>
      <template v-slot:footer>
        <p>这里是footer</p>
      </template>
      <template v-slot:head>
        <p>这里是head</p>
      </template>
      <template>
        <p>这里是默认插槽</p>
        <p>aaaaa</p>
      </template>
    </Index>
  </div>
</template>
<script>
import Index from './components/index.vue'
export default {
  name: 'app',
  components: {
    Index
  }

}
</script>
父组件插槽:
<template>
  <div>
    <div>
      <h1>我是头部</h1>
      <slot name="head"></slot>
    </div>
     <div>
      <h1>我是默认插槽</h1>
      <slot></slot>
    </div>
    <div>   
      <h1>我是尾部</h1>
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>

注意:

父级的填充内容如果指定到子组件的没有对应名字插槽,那么该内容不会被填充到默认插槽中。
 如果子组件没有默认插槽,而父级的填充内容指定到默认插槽中,那么该内容就“不会”填充到子组件的任何一个插槽中
 如果子组件有多个默认插槽,而父组件所有指定到默认插槽的填充内容,将“会” “全都”填充到子组件的每个默认插槽中。
posted @ 2020-03-22 14:41  痞子不说情话  阅读(247)  评论(0编辑  收藏  举报