vue 中的三种插槽用法

Vue中的 三种插槽分别为 匿名插槽，命名插槽，作用域插槽。

匿名插槽

子组件：

<div>
    <li>我是老大li>
    <slot>slot>
div>

父组件：子组件挂在在父组件上 生成标签

<div>
    <son>
        <li>天天li>
    son>
div>

父组件解译：

<div>
    <li>我是老大li>
    <li>天天li>
div>

命名插槽

子组件;

<div>
    <slot name="dada">slot>
    <li>我是老大li>
    <slot name="didi">slot>
div>

父组件;子组件挂在父组件上 生成标签

<div>
    <son>
        <li solt="dada"> 我是老太li>
        <li solt="didi">我是老小子li>
    son>
div>

父组件解译：

<div>
    <li>我是老太li>
    <li>我是老大li>
    <li>我是老小子li>
div>

作用域插槽：
子组件;

<div>
    <slot name="dada" up="上">slot>
    <li>我是老二li>
    <solt name="didi" down="下">solt>
div>

父组件：子组件挂在父组件上 生成标签

<div>
    <son>
        <li solt="dada" slot-scopt="st">{{st.up}}li>
         <li solt="didi" slot-scopt="st">{{st.down}}li>
    son>
div>

父组件编译：

<div>
    <li>上li>
    <li>我是老二li>
    <li>下li>
div>