vue插槽

leader755

发布于 2022-03-09 14:11:27

38300

代码可运行

文章被收录于专栏：万丈高楼平地起万丈高楼平地起

运行总次数：0

代码可运行

1.单个插槽 | 默认插槽 | 匿名插槽

匿名插槽就是可以在父组件中的子组件的标签中直接添加内容

子组件 A:

<template>
  <div class="dialog">
         <div>我是A组件中的对话框<div>
         <slot></slot>
    </div>
</template>

<script>
    export default {
      name: "diolage",
      props: {
        options: {
        type:String
      }
      }
    }


</script>

父组件：（在组件外, 我们可以往插槽里填入任何元素, dialog-a为组件的名称）

<template>
    <dialogPage :options="hello"> // 只有子组件中使用了slot才能成功在此标签中添加内容
           <button>按钮</button>
           // ... 可以是任何元素
    </dialogPage>
</template>

<script>
  import dialogPage from './dialog'
    export default {
      name: "Home",
    components:{
            dialogPage
    },
      data() {
        return {
          hello:'我是父组件的值'
      }
      }
    }
</script>

2.具名插槽

具名插槽就是一个拥有 name 属性的插槽，具名插槽可以在同一组件中多次使用。

子组件 A:

<template>
  <div class="dialog">
         <div>我是A组件中的对话框<div>
         <slot name="slotUp"></slot> // 具名插槽
        <slot name="slotDown"></slot> // 具名插槽
        <slot></slot> //匿名插槽
    </div>
</template>

<script>
    export default {
      name: "diolage",
      props: {
        options: {
        type:String
      }
      }
    }


</script>

父组件：（在组件外, 我们可以往插槽里填入任何元素, dialog-a为组件的名称）没有 slot 属性的 html 模板默认关联匿名插槽。

<template>
    <dialogPage :options="hello">
         <template slot="slotUp">
           <button>按钮</button>
         </template>
        <template slot="slotDown">
           <a>按钮</a>
       </template>
        <template>
           <a>按钮</a>
       </template>
    </dialogPage>
</template>

<script>
  import dialogPage from './dialog'
    export default {
      name: "Home",
    components:{
            dialogPage
    },
      data() {
        return {
          hello:'我是父组件的值'
      }
      }
    }
</script>

3.作用域插槽 | 带数据的插槽

作用域插槽就是一个可以携带数据的具名插槽，称为作用域插槽。

子组件 A:

<template>
  <div class="dialog">
         <div>我是A组件中的对话框<div>
    <slot name="slotData" :message="message"></slot> // 作用域插槽
         <slot name="slotUp"></slot> // 具名插槽
        <slot name="slotDown"></slot> // 具名插槽
        <slot></slot> //匿名插槽
    </div>
</template>

<script>
    export default {
      name: "diolage",
      props: {
        options: {
        type:String
      }
      },
    data(){
        return {
          message:'我是作用域插槽的数据'
      }
    }
    }
</script>

父组件：（在组件外, 我们可以往插槽里填入任何元素, dialog-a为组件的名称）没有 slot 属性的 html 模板默认关联匿名插槽。

<template>
    <dialogPage :options="hello">
    <template slot="slotData" slot-scope="scope"> // 作用域插槽
        <button>{{scope.message}}</button>
      </template>
    </dialogPage>
</template>

<script>
  import dialogPage from './dialog'
    export default {
      name: "Home",
    components:{
            dialogPage
    },
      data() {
        return {
          hello:'我是父组件的值'
      }
      }
    }
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-13，如有侵权请联系 cloudcommunity@tencent.com 删除

网站