vue的插槽

一个父组件里面有个引用的子组件。但是子组件需要显示的内容并非来自本身。

 

一般的子组件来自本身的例子

比如我有个子组件

son.vue的内容是

<template>

     <div>

         我是子组件啊！！！

     </div>

<template>

 

父组件是father.vue的内容是

引入子组件

import son from '../public/son'  

components: {son },

<template>

     <div>

         我是父组件啊！！！

        下面是子组件：<son></son>

     </div>

<template>

 

 

最后显示的内容就是

        我是父组件啊！！！

        下面是子组件：我是子组件啊！！！

--------------------------------------------------------------------------------------------------------------------------------------------------------------

这是没有使用插槽的情况。但是我那个<son></son>标签里面如果不全部是自己本来的内容，还有别的。像下面这样。实际上“<p>我还想插入别的内容</p>”是根本显示不出来的。

父组件是father.vue的内容是

<template>

     <div>

         我是父组件啊！！！

        下面是子组件： 

<son>

   <p>我还想插入别的内容</p>

</son>

 

这个时候就需要插槽了，这个时候需要在子组件里面加slot

son.vue的内容变成是

<template>

     <div>

          <slot></slot>     这个slot就相当于父组件里面子组件的标签里面的内容

         我是子组件啊！！！

     </div>

<template>

 

这个时候显示的就是

        我是父组件啊！！！

       下面是子组件：

        我还想插入别的内容

       我是子组件啊！！！

 

--------------------------------------------------------------------------------------------------------------------------------------------

如果<son></son>标签里面里面有多个内容，我们可以通过具名插槽来实现；

子组件是son.vue的内容变成是

<template>

     <div>

         <slot name="header"></slot> 
         <slot name="footer"></slot> 

         我是子组件啊！！！

     </div>

<template>

 

父组件是father.vue的内容是

<template>

     <div>

         我是父组件啊！！！

        下面是子组件： 

<son>

         <p  slot="header">头部</p> 
         <p  slot="footer">尾部</p> 

</son>

     </div>

<template>

 

这个时候显示的就是

        我是父组件啊！！！

       下面是子组件：

       头部

       尾部 

       我是子组件啊！！！