Vue 的三种插槽单个插槽、具名插槽、作用域插槽

最新推荐文章于 2024-06-01 21:28:55 发布

一个还没工作的研究僧

最新推荐文章于 2024-06-01 21:28:55 发布

阅读量628

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_35644307/article/details/110687081

版权

vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、单个插槽

单个插槽就是指<slot>，<slot>的作用类似于占符。
举个例子：

  //定义一个全局子组件
    Vue.component('child',{
        template: '<div><slot></slot></div>',
    })

    var vm=new Vue({
        el: '#root'
    })

<!--引用child组件-->
<div id="root">
    <child>
        <span>我是占位符</span>
    </child>
</div>

上述的子组件child里定义的slot被span标签给代替了，如果子组件里没有定义slot，则span标签会被直接忽略，且一个子组件里只能定义一个单个插槽。

二、具名插槽

那么自定义组件可不可以有多个插槽呢？答案是可以的，元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽。
举个例子：
定义一个<base-layout> 组件：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

按name向具名插槽提供内容， v-slot :header表示替换子组件里名为header的slot
注意 v-slot 只能添加在<template>

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

三、作用域插槽

说实话，vue官网讲解的作用域插槽有点晦涩难懂，讲解的也不是很详细。
作用域插槽的作用：父组件替换插槽标签，但是内容由子组件来提供。
看个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <child></child>
    <child></child>
</div>

</body>
<script>
  
    //定义一个全局子组件
    Vue.component('child',{
        data: function(){
        return {
        list:[1,2,3,4]
    }
    },
        template: '<div><ul><li v-for="value in list">{{value}}</li></ul></div>',
    })
    
   var vm=new Vue({
        el: '#root'
    })
    
</script>
</script>
</html>

显示效果
在这里插入图片描述
调用了两次child组件，因为调用的是同一个子组件，所以显示的内容完全一样。如何在每次调用时能有各自的渲染效果？这时候作用域插槽就可以发挥作用了。

作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。通过下列展示作用域插槽的使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


<div id="root">
    <child>
        <!--定义一个插槽，该插槽必须放在template标签内-->
        <template slot-scope="props">
            <li>{{props.value}}</li>
        </template>
    </child>
    <!--!--定义不同的渲染方式-->
    <child>
    <!--slot-scope="props"作用是使props指向子组件中定义的<slot>》-->
        <template slot-scope="props">
            <h1>{{props.value}}</h1>
        </template>
    </child>

</div>

</body>
<script>

    //定义一个全局子组件
    Vue.component('child',{
        data: function(){
        return {
        list:[1,2,3,4]
    }
    },
        template: '<div><ul><slot v-for="value in list" :value=value></slot></ul></div>',
    })

   var vm=new Vue({
        el: '#root'
    })

</script>
</script>
</html>

显示效果：
在这里插入图片描述

一个还没工作的研究僧

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue 的三种插槽单个插槽、具名插槽、作用域插槽

目录单个插槽具名插槽作用域插槽一、单个插槽单个插槽就是指，的作用类似于占位符。举个例子： //定义一个全局子组件 Vue.component('child',{ template: '<div><slot></slot></div>', }) var vm=new Vue({ el: '#root' })<di
复制链接

扫一扫