vue中的插槽的使用


##

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>

文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论 (留下邮箱后可以快速收到回复)
 上一篇
博客园主题美化 博客园主题美化
1.主题效果实际网站效果 https://www.cnblogs.com/leader755/ 2.主题介绍 本主题使用的 SimpleMemory 这款主题,看完本教程后你能搭出相同美化的博客园主题博客了,也可按照官方教程调整细节或者新
2021-01-17
下一篇 
谈谈你不知道的gist 谈谈你不知道的gist
1.Gist 是什么关于 Gist 的详细介绍,请阅读官方文档About gists,下面只简略介绍部分功能: Gist 是一种与其他人共享代码片段和粘贴的简单方法。 当您需要与同事或朋友共享示例代码或技术时,可以使用它。 GitHub
2021-01-04
  目录