Vue——插槽、具名插槽、作用域插槽

最新推荐文章于 2022-06-22 17:18:08 发布

Wyyyy1024

最新推荐文章于 2022-06-22 17:18:08 发布

阅读量181

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44389562/article/details/110071846

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中组件插槽的使用，包括基本插槽、具名插槽和v-slot指令的应用。通过示例展示了如何在组件中插入自定义内容，并解释了作用域插槽的概念，允许父组件对子组件内容进行数据加工处理。文章还提供了v-slot和slot-scope的使用步骤，帮助开发者更好地理解和运用Vue.js的插槽特性。

摘要由CSDN通过智能技术生成

组件插槽

在组件的使用时传入值通过<slot></slot>来传值

插槽的基本使用

1. 插槽位置
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
2. 插槽内容
<alert-box>Something bad happened.</alert-box>

具名插槽

有名字的插槽

slot的使用

//slot的使用
<body>
  <div id="app">
    <base-layout>
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

    <base-layout>
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>

注意：

v-slot指令是vue2.6.0之后添加的取代了 slot 和 slot-scope
slot和slot-scope是被废弃但未被移除的
v-slot只能添加在<template>

v-slot的使用

//v-slot的使用 必须引入vue2.6.0以后的js文件
<body>
    <div id="app">
        <slot-test>插槽的使用</slot-test>
        <slot-teat>
            <template v-slot:header>
                <p>头部内容</p>
            </template>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <template v-slot:footer>
                <p>头部内容</p>
            </template>
        </slot-teat>

    </div>
    
    <script>
        Vue.component('slot-test',{
            template:`<div>
                <slot></slot>
                </div>`
        });
        Vue.component('slot-teat',{
            template:` <div>
          <header>
            <slot name='header' ></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer' ></slot>
          </footer>
        </div>`
        });
        let options={
            el:'#app',
            data:{
            }
        }
        var vm=new Vue(options);
    </script>
</body>

作用域插槽

父组件对子组件的内容进行加工处理

让插槽内容能够访问子组件中才有的数据是很有用的

slot-scope的使用

使用步骤
1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性=‘要访问的数据’
2.在标签中绑定指令v-slot或者slot-scope=‘自定义属性’
注意：
在使用v-slot指令时必须导入vue2.6.0之后的版本的js文件

    <style type="text/css">
        .current {
          color: orange;
        }
      </style>
    <script src="./js/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <!-- 需求在视图上显示firstname的值在不改变组件的插槽内容 -->
        <!-- 1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性='要访问的数据'
            2.在<template>标签中绑定指令v-slot或者slot-scope='自定义属性' -->
       <slot-test>
           <!-- 第一种v-slot 导入的vue文件必须是vue2.6.0以后的 -->
        <!-- <template v-slot="slotDate">
            {{slotDate.user.firstname}}
        </template> -->
        <!-- 第二种 slot-scope -->
        <template slot-scope="slotDate">
            {{slotDate.user.firstname}}
        </template>
       </slot-test>


 <!-- 需求遍历父组件中数据通过子组件动态渲染到页面上 -->
       <slot-frusts :list="list">
            <template v-slot="fruits">
                <span :class='fruits.info.id==2?"current":""'>{{fruits.info.name}}</span>
            </template>
       </slot-frusts>


      
    </div>
    
    <script>
        Vue.component('slot-test',{
            data:function(){
                return {
                    user:{
                    firstname:'冰冰',
                    lastname:'范'
                }
                }
            },
            template:`<div>
                <slot :user='user'>{{user.lastname}}</slot>
                </div>`
        });

        Vue.component('slot-frusts',{
           props:['list'],
            template:`
            <div>
                <ul>
                    <li :key='item.id' v-for="(item,index) in list">
                        <slot :info='item'>{{item.id}}</slot>
                    </li>
                </ul>
            </div>`
        });
        let options={
            el:'#app',
            data:{
              list:[{
                  id:1,
                  name:'apple'
              },{
                  id:2,
                  name:'orange'
              },{
                  id:3,
                  name:'banana'
              }]

            }

        }
        var vm=new Vue(options);
    </script>
</body>

Wyyyy1024

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue——插槽、具名插槽、作用域插槽

组件插槽在组件的使用时传入值通过<slot></slot>来传值插槽的基本使用1. 插槽位置Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>`})2. 插槽内容<alert-box>Something b
复制链接

扫一扫

专栏目录