分析Vue.js的组件插槽

最新推荐文章于 2022-03-01 23:18:58 发布
最新推荐文章于 2022-03-01 23:18:58 发布
阅读量158 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xhmse/article/details/105199709
版权

背景知识：Vue.js的作用域插槽在第三方组件开发等用到的比较多。要理解作用域插槽，先要理解插槽，插槽说白了是父组件向子组件传值的一种方式。父组件向子组件传值的另一种方式是属性传值。

1 属性传值

​ 最简单的例子，先看代码：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <script src='lib/vue.js'></script>
    </head>
    <body>
        <div id='app'>
          <!-- 在父组件中使用子组件 -->
          <!-- 2、元素（子组件）socom的绑定属性message获取父组件的msg变量值 -->
          <soncom :message="msg"></soncom>
        </div>
        <script>
            var soncom = {
              // 3、子组件模板中显示属性message的值
              template:'<div>{{message}}</div>',
              // 1、子组件定义绑定属性message
              props:['message']
            };
            var vm = new Vue({
                el:'#app',
                data:{
                  msg:'hello soncom!'
                },
                methods:{},
                components:{
                  soncom
                }
            })
        </script>
    </body>
</html>

注意：
	子组件名称最好不要使用驼峰命名，因为子组件作为html元素使用，元素名自动转为小写，会报未知的自定义元素错误。如果非得用驼峰命名子组件名称，在子组件作为html元素使用时，要把名称转换为短线连接符写法。
	示例：
	写法1：
		<div id='app'>
          <soncom :message="msg"></soncom>
        </div>
        ...
        var sonCom = {
            // 3、子组件模板中显示属性message的值
            template:'<div>{{message}}</div>',
            // 1、子组件定义绑定属性message
            props:['message']
        };
        components:{
        	soncom：sonCom
        }
        
    写法2：
		<div id='app'>
          <son-com :message="msg"></son-com>
        </div>
        ...
        var sonCom = {
            // 3、子组件模板中显示属性message的值
            template:'<div>{{message}}</div>',
            // 1、子组件定义绑定属性message
            props:['message']
        };
        components:{
        	sonCom
        }

代码分析：

在这里插入图片描述

2 组件插槽

​ 理解了属性传值，组件插槽传值就更简单了，可以理解为对属性传值的封装或抽象。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <script src='lib/vue.js'></script>
    </head>
    <body>        
        <div id='app'>
          <!-- 
              与一般用法不同，父组件在子组件标签间放了数据，这个数据会出现在子组件插槽中，
              即slot占位符的位置。这种更加简单的传值方式，可以理解为是对属性传值的封装或者简化。
          -->
          <soncom>{{ msg }}</soncom>
        </div>
        <script>
            var soncom = {
              // 组件插槽<slot></slot>是子组件的占位符，相当于在子组件挖了一个坑
              template:'<div>来自父组件的消息：<slot></slot></div>'
            };
            var vm = new Vue({
                el:'#app',
                data:{
                  msg: 'Hello,soncom!'
                },
                methods:{},
                components:{
                  soncom
                }
            })
        </script>
    </body>
</html>

代码分析：

在这里插入图片描述

3 具名插槽
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <script src='lib/vue.js'></script>
    </head>
    <body>
        <div id='app'>
          <soncom>
            <h1 slot="header">标题信息</h1>
            <p>主体信息1</p>
            <p>主体信息2</p>
            <p slot="footer">底部信息</p>
          </soncom>
        </div>
        <script>
            var soncom = {
              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:{},
                methods:{},
                components:{
                  soncom
                }
            })
        </script>
    </body>
</html>

代码解析：

在这里插入图片描述

显示结果：

在这里插入图片描述

​ 实际上，通过插槽，可以隐藏子组件的细节，只是把传递数据的接口暴露给父组件，然后由vue把父组件传递的数据放到子组件固定的位置，最终由浏览器把子组件渲染到DOM中。

​ 通过插槽可以把父组件传递的信息固定地显示在子组件定义好的插槽位置上，即使在父组件使用子组件时打乱顺序：

		<div id='app'>
          <soncom>
            <!-- <div slot="header">
              <p>标题信息1</p>
              <p>标题信息2</p>
            </div> -->
            <h1 slot="header">标题信息</h1>
            <p>主体信息1</p>
            <p>主体信息2</p>
            <p slot="footer">底部信息</p>
            <p>其它信息</p>
          </soncom>
        </div>

​ 最终渲染结果，也会把数据填充到对应的插槽中：

在这里插入图片描述

功能扩展：

通过以下方式，也可以让具名插槽显示多行信息：

		<div id='app'>
          <soncom>
            <div slot="header">
              <p>标题信息1</p>
              <p>标题信息2</p>
            </div>
            <p>主体信息1</p>
            <p>主体信息2</p>
            <p slot="footer">底部信息</p>
          </soncom>
        </div>

在这里插入图片描述

可以使用Vue提供的临时标签：

		<div id='app'>
          <soncom>
            <template slot="header">
              <p>标题信息1</p>
              <p>标题信息2</p>
            </template>
            <p>主体信息1</p>
            <p>主体信息2</p>
            <p slot="footer">底部信息</p>
          </soncom>
        </div>

在这里插入图片描述

4 作用域插槽

​ 与普通插槽的区别：

​ 通俗点讲：

​ 普通插槽，子组件定义的坑里没内容，由父组件向坑里填内容；作用域插槽，子组件的坑里有内容，父组件可以看到坑里的内容，并可以对内容的显示外观施加影响，甚至改变具体内容。

​ 作用域插槽，把子组件内容更多地封装在了子组件内部，仅需要父组件通过子组件暴露的接口，对子组件内容及外观施加有限影响，而不需要关心子组件的细节，这更能体现封装的特点。

​ 作用域插槽，为第三方组件的开发，提供了很大的便利。

​

​ 具体区别：

​ 1、作用域不同：

​ 普通插槽是父组件向子组件传递数据；作用域插槽是子组件把自己的数据暴露给父组件，父组件可以操纵子组件的数据，两种插槽的作用域不同。

​ 2、内容定义和显示方式不同：

​ 普通插槽显示内容在父组件中定义，子组件只有空的插槽标签，标签间即使有内容，也会被覆盖；

​ 作用域插槽显示内容在子组件的插槽标签间定义，父组件只能间接对内容或显示样式施加影响。

​ 3、使用方式不同：

​ 子组件的插槽标签需要定义绑定属性；父组件使用子组件要在template标签中通过指定slot-scop属性，引入子组件插槽的绑定属性。

父组件改变子组件的数据示例：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <script src='lib/vue.js'></script>
    </head>
    <body>
        <div id='app'>
          <soncom>
            <template slot-scope="datafromson">
              {{ datafromson.sonpro = '来自父组件的数据' }}
            </template>
          </soncom>
        </div>
        <script>
            var soncom = {
              template:`
                <div>
                  <slot :sonpro="sonData">{{ sonData }}</slot>
                </div>
              `,
              data(){
                return {
                  sonData:'来自子组件的数据'
                }
              }
            }
            var vm = new Vue({
                el:'#app',
                data:{},
                methods:{},
                components:{
                  soncom
                }
            })
        </script>
    </body>
</html>

代码分析：

在这里插入图片描述

显示结果：

在这里插入图片描述

父组件影响子组件内容外观的示例：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <script src='lib/vue.js'></script>
    </head>
    <body>
        <div id='app'>
          <soncom>
            <template slot-scope="datafromson">
              <!-- 通过对子组件绑定属性的修饰，改变子组件属性关联数据的显示外观 仅影响子组件插槽标签内的显示 -->
              <strong style="color:red">{{ datafromson.sonpro }}</strong>
            </template>
          </soncom>
        </div>
        <script>
            var soncom = {
              template:`
                <div>
                  <!-- 父组件仅影响到这里slot标签内的显示外观 -->
                  <slot :sonpro="sonData">{{ sonData }}</slot>
                  <!-- 不会影响到子组件其它元素的显示 -->
                  <p v-text="sonData"></p>
                </div>
              `,
              data(){
                return {
                  sonData:'来自子组件的数据'
                }
              }
            }
            var vm = new Vue({
                el:'#app',
                data:{},
                methods:{},
                components:{
                  soncom
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

更复杂一点的示例：结合属性传值使用

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <script src='lib/vue.js'></script>
    </head>
    <body>
        <div id='app'>
          <soncom :son-fruit-list="fruitList">
            <template slot-scope="sonPro">
              <!-- <strong style="color:red">{{ sonPro.fruit.name }}</strong> -->
              <!-- 也可以通过条件判断精细控制列表中的某一行 -->
              <strong v-if="sonPro.fruit.id == 2" style="color:red">{{ sonPro.fruit.name }}</strong>
            </template>
          </soncom>
        </div>
        <script>
            var soncom = {
              template:`
                <div>
                  <ul>
                    <li :key="item.id" v-for="item in sonFruitList">
                      <slot :fruit="item">{{ item.name }}</slot>
                    </li>
                  </ul>
                </div>
              `,
              // 属性名最好不要驼峰命名，否则在元素标签内作为属性名使用时要修改为连接符命名
              props:['sonFruitList']
            }
            var vm = new Vue({
                el:'#app',
                data:{
                  fruitList:[
                    { id:1,name:'apple' },
                    { id:2,name:'orange' },
                    { id:3,name:'banana' }
                  ]
                },
                methods:{},
                components:{
                  soncom
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

xhmse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件插槽 Vue.js
m0_51281306的博客
04-28 239
组件插槽可以便捷的设置组件内容。 组件插槽 • 单个插槽 • 具名插槽 • 作用域插槽 单个插槽 • 如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组 件的使用灵活度会很高。 但平常我们书写的组件，组件首尾标签中书写的内容会被抛弃。 我们需要通过 <slot> 进行插槽设置。 需要注意模板内容的渲染位置： 我们可以在 <slot> 中为插槽设置默认值，也称为后备内容。 具名插...
Vue中slot插槽的使用
xiecheng1995的博客
06-25 1289
为什么使用slot slot翻译为插槽： 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽 插槽的目的是让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等 组件的插槽： 组件的插槽也是为了让我们封装的组件更加具有扩展性 让使用者可以决定组件内部的一些内容到底展示什么 举例：移动网站中的导航栏 移动开发中，几乎每个页面都有导航栏。 导航栏我们必然会封装成一个插件，比如nav-bar组件。 一旦有了这个组件，我们就可以在多个页面中复
对于Vue.js中插槽slot的理解
weixin_44844639的博客
08-20 228
组件在Vue中就相当于一块可以复用的代码块，类似于方法的存在，而插槽就是可以放置组件的地方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script src="h
Vue中对于插槽的理解
weixin_45129940的博客
07-14 222
** Vue的插槽分为三种插槽，匿名插槽、具名插槽、作用域插槽 ** 第一种是匿名插槽： 匿名插槽的使用方法比较简单粗暴，直接在子组件中进行使用，然后运用到template模板当中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
Vue：插槽的理解与使用
qq_43811879的博客
12-20 655
vue插槽问题引入后备插槽具名插槽作用域插槽 问题引入 ​ 在学习vue插槽的时候我们应当先知道什么是vue的父子组件。那在什么时候会用到插槽呢？当构建页面的时候，我们在父组件中引入子组件，但是引入子组件之后还是无法满足我们的需求，我们还希望在子组件中添加一点东西，这个时候我们就要用到插槽来分发内容。 ​ 首先定义一个myslot的子组件 <template> <div> <p>我是子组件</p> </div> </template
vue.d3.sunburst-基于D3.js的React性旭日形组件-Vue.js开发
05-27
Sunburst提供了依赖D3.js的可重用的vue sunburst图表组件。 森伯斯特（Sunburst）是该库的主要组件，它基于数据道具显示森伯斯特图表，使用child属性作为层次结构，name属性作为命名属性，size属性作为圆弧大小。 ...
vue.js从入门到深入再到随心而用——————vue.js中的（组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法）
01-08
组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 1.1组件的基本使用 Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何...
:milky_way:Vue.js组件，用于视差图像滚动效果-JavaScript开发
05-26
演示此处的演示安装npm install vue-parallaxy或yarn add vue-parallaxy用法vue-parallax与slo一起使用vue-parallaxy是快速60fps视差滚动效果的组件在vue 2中。演示在此处演示安装npm install vue-parallaxy或yarn...
vue-splitter-pane-一个Vuejs组件，以可调整的拆分方式（垂直或水平）呈现两个插槽。-Vue.js开发
05-27
Vue拆分器窗格演示vue-splitter-pane是Vuejs组件，它以可调节的拆分方式（垂直或水平）呈现两个插槽。 使用Vue拆分器窗格演示vue-splitter-pane是Vuejs组件，它以可调节的拆分方式（垂直或水平）呈现两个插槽。 使用...
vue-timeselector-用于Vue.js的完全简单可定制的功能强大的时间选择器组件。-Vue.js开发
05-27
vue-timeselector:three_o’clock:简单的可自定义Vue.js时间选择器组件vue-timeselector是一个Vue（2.x）组件，使您能够选择时间vue-timeselector:three_o’clock:简单的可自定义Vue.js的时间选择器组件vue-...
vuejs的插槽(slot)
zhangCheng的博客
04-06 471
1、概念: 我的理解是slot就是一个插槽,将父组件的html混入到子组件里面。 普通的slot，数据和数据的展现形式(html和样式),都由父组件决定,子组件只能决定出现的地方. 作用域slot,数据由子组件提供,展现形式有父组件决定,我感觉就是父组件把数据加工样式后,再替换掉子组件的slot标签元素。 2、普通slot 例子: <div id="app"> <my...
vue组件中的插槽使用
星星有所不知
07-02 1887
vue组件中的插槽的使用匿名插槽具名插槽作用域插槽 Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope 插槽的目的是让组件能后更好的进行扩展，使用起来更灵活 匿名插槽 故而言之就是插槽指定名称，默认为default //comp <div> <slot><slot> </div> //parent &lt...
（十二）vue.js组件——进阶篇之slot插槽（4）
默守的博客
11-13 1372
概述 我们已经知道，现在的web应用及其页面，基本都是由各个组件组合形成，那么这个时候我们【如何较好的组合各个组件】就成为了我们需要关心的问题了 场景 想象下，对于各个组件组合使用的场景，如果我们要在布局组件中包裹三个组件： 导航组件、内容组件、页脚组件 这时，我们该如何实现？ 我们只能在定义布局组件时就引入这三个组件！ 问题 如果这样实现的话，先不说可扩展性，就是万一哪天我们这三个组件的名字变了...
Vue插槽的理解和使用
bobozai86的博客
04-12 4万+
对于插槽的概念和使用，这是vue的一个难点，这需要我们静下心来，慢慢研究。以下是我这两天通过官网和其他资料的学习和使用总结出来的笔记，如有错误或者有不同见解的，欢迎留言，一起学习。 什么是插槽 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的&lt...
component多个 vue_vue中插槽有哪些用法
weixin_29883867的博客
01-02 1030
vue中<slot></slot>标签代表插槽一、内容插槽顾名思义，插槽的作用就是存放内容html代码如下：<test-man> <v-card dark> is handsome </v-card> </test-man>javascript代码如下：Vue.component('te...
【Vue】组件 - 多个插槽
weixin_39415598的博客
03-06 2398
微信订阅号：Rabbit_svip 准备知识：【Vue】组件 - 插槽的基本用法 插槽除了有上面这种玩法之外，还可以通过关键字来指定。 微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip 在父级调用子组件的时候，通过slot属性，指定一个标识。 然后在子组件里，通过name来判断该接收哪个父级传过来...
Vue系列之插槽（slot）详解
热门推荐
老__L的博客
03-01 4万+
插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
Vue 组件和插槽的理解与使用
mht1829的博客
12-09 1万+
Vue中各类插槽的使用与理解 父子组件之间的通信props和渲染函数render的使用
VUE.JS-插槽
XiaoSen207的博客
11-29 560
1、默认插槽 首先创建一个组件category.vue： <template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --> <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot> </div> </template> <script>
写四篇关于Vue.js
最新发布
04-24
它也会带您深入探讨 Vue.js 组件的高级特性，如 slot 插槽和 mixins 混合。 4. “Vue.js 测试指南”：这篇文章主要介绍了如何使用测试工具来测试 Vue.js 应用程序。它包括了使用 Jest 和 Vue Test Utils 编写单元...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值