vue 插槽

Posted 2021-03-16 ronle

默认插槽（匿名插槽）

father.vue

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl">
        <span>菜单1</span>
        <span>菜单2</span>
      </div>
    </child>
  </div>
</template>

<script>
  import child from "./child";

  export default {
    name: "father",
    components: {
      child
    }
  }
</script>

 因为父组件在里面写了html模板，那么子组件的匿名插槽这块模板就是下面这样。也就是说，子组件的匿名插槽被使用了，是被下面这块模板使用了。

child.vue

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "slot"
  }
</script>

 

具名插槽

father.vue

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜单-1</span>
        <span>菜单-2</span>
      </div>
      <div class="tmpl">
        <span>菜单->1</span>
        <span>菜单->2</span>
      </div>
    </child>
  </div>
</template>

<script>
  import child from "./child";

  export default {
    name: "father",
    components: {
      child
    }
  }
</script>

child.vue

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <!--    具名插槽-->
    <slot name="up"></slot>
    <!--    具名插槽-->
    <slot name="down"></slot>
    <!--    匿名插槽-->
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "slots"
  }
</script>

 

作用域插槽（带数据的插槽）

father.vue

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>具名插槽-up-1</span>
        <span>具名插槽-up-2</span>
      </div>
    </child>
    <child>
      <div class="tmpl" slot="down">
        <span>具名插槽-down-1</span>
        <span>具名插槽-down-2</span>
      </div>
    </child>
    <child>
      <div class="tmpl">
        <span>匿名插槽-1</span>
        <span>匿名插槽-2</span>
      </div>
    </child>
    <child-data>
      <template slot-scope="props">
        <span>作用域插槽</span>
        {{props.data.name}}
      </template>
    </child-data>
  </div>
</template>

<script>
  import child from "./child";
  import childData from "./childData";

  export default {
    name: "father",
    components: {
      child,
      childData
    }
  }
</script>

child.vue 同上

childData.vue

<template>
  <div class="child">
    <!--    作用域插槽-->
    <slot :data="data"></slot>
  </div>
</template>

<script>
  export default {
    name: "childData",
    data: function () {
      return {
        data: {
          name: ‘vue‘,
          isUse: true
        }
      }
    },
  }
</script>