Vue.js slot插槽的作用域插槽用法详解

目录
  • 没有插槽的情况
  • Vue2.x 插槽
    • 有插槽的情况
    • 具名插槽
    • 没有slot属性
    • 插槽简单实例应用
    • 作用域插槽 ( 2.1.0 新增 )
  • Vue3.x 插槽
    • 插槽
    • 作用域插槽

没有插槽的情况

<div id="app">
    <child>
        <span>1111</span>
    </child>
</div>

<script>
    // 注册子组件
    Vue.component("child", {
        template: "<div>这是一个div标签</div>"
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

模版里的 span标签 会被替代成 “<div>这是一个div标签</div>” 如下图:

Vue2.x 插槽

有插槽的情况

简单来说,使用 slot标签 ,可以将<span>1111</span>,放到子组件中想让他显示的地方。如下图:

<div id="app">
    <child>
        <span>1111</span>
    </child>
</div>

<script>
    // 注册子组件
    Vue.component("child", {
        template: "<div>这是<slot></slot>一个div标签</div>"
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

即使有多个标签,会一起被插入,相当于用父组件放在子组件里的标签,替换了<slot></slot>这个标签。如下图:

<div id="app">
    <child>
        <span>1111</span>
        <i>2222</i>
        <b>3333</b>
    </child>
</div>

<script>
    // 注册子组件
    Vue.component("child", {
        template: "<div>这是<slot></slot>一个div标签</div>"
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

具名插槽

  1. 父组件在要分发的标签里添加 slot="xxx" 属性
  2. 子组件在对应分发的位置的 slot标签 里,添加 name="xxx" 属性
  3. 然后就会将对应的标签放在对应的位置了。如下图:
<div id="app">
    <child>
        <span slot="one">1111</span>
        <i slot="two">2222</i>
        <b slot="three">3333</b>
    </child>
</div>

<script>

    // 注册子组件
    Vue.component("child", {
        template:   `<div>
                        这是
                        <slot name='one'></slot>
                        一个
                        <slot name='two'></slot>
                        div
                        <slot name='three'></slot>
                        标签
                    </div>`
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

没有slot属性

如果子组件标签中没有slot属性,将会显示默认的值

    <div id="app">
        <child>
            <!-- <span slot="one">1111</span> -->
            <i slot="two">2222</i>
            <!-- <b slot="three">3333</b> -->
        </child>
    </div>

    <script>
        // 注册子组件
        Vue.component("child", {
            template:   `<div>
                            <slot name='one'>no one</slot>
                            <slot name='two'>no two</slot>
                            <slot name='three'>no three</slot>
                        </div>`

        });

        // 初始化父组件
        new Vue({
            el: "#app"
        });
    </script>

slot="two" 就被插到固定的位置上,如下图:

插槽简单实例应用

想想你的电脑主板上的各种插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的,所以假设有个组件是computer,其模板是template ,如下:

<body>
    <div id="app">
        <computer>
            <div slot="CPU">Intel Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="Memory">Kingston 32G</div>
            <div slot="Hard-drive">Samsung SSD 1T</div>
        </computer>
    </div>

    <script>
        // 注册子组件
        Vue.component("computer", {
            template:   `<div>
                            <slot name="CPU">这儿插你的CPU</slot>
                            <slot name="GPU">这儿插你的显卡</slot>
                            <slot name="Memory">这儿插你的内存</slot>
                            <slot name="Hard-drive">这儿插你的硬盘</slot>
                        </div>`
        });

        // 初始化父组件
        new Vue({
            el: "#app"
        });
    </script>
</body>

作用域插槽 ( 2.1.0 新增 )

作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

  1. 在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样
  2. 在父组件中,通过 slot-scope="scoped" 的形式,获取子组件传递过来的数据,该数据对象的别名为 scoped。这就是作用域插槽的模板。
<div id="app">
    <child>
    	<!-- 2. 接收myName数据,scoped 为 { "myName": "猫老板的豆" } -->
        <template slot="content" slot-scope="scoped">
            <div>{{ scoped.myName }}</div>
        </template>
    </child>
</div>

<script>
	Vue.component('child', {
		data () {
			return {
				myName: '猫老板的豆'
			}
		},
		template: `<slot name="content" :myName="myName"></slot>`   // 1. 对外抛出 myName 数据
	})

	new Vue({
		el: "#app"
	});
</script>

Vue3.x 插槽

插槽

<!-- 父组件 -->
<template>
	<Child>
		<!-- Vue2.x写法
		<div slot="parent">
            <div>父组件</div>
		</div>
		 -->
		<template v-slot:parent>
            <div>父组件</div>
        </template>
	</Child>
</template>

<!-- 子组件 -->
<template>
	<slot name='parent'>子组件</slot>
</template>

作用域插槽

在 Vue2.x 中具名插槽和作用域插槽分别使用 slotslot-scope 来实现, 在 Vue3.x 中将 slotslot-scope进行了合并统一使用

父组件:

<template>
	<Child>
		<!-- <template slot="content" slot-scope="scoped">  -->
		<template v-slot:content="scoped">
			<div>{{scoped.myName}}</div>
		</template>
	</Child>
</template>

子组件:

<template>
	<slot name="content" :myName="myName"></slot>
</template>

<script>

import { ref } from 'vue'
export default {
	setup () {

		let myName = ref("猫老板的豆")

		return { myName }
	},
}
</script>

到此这篇关于Vue.js slot插槽的作用域插槽用法详解的文章就介绍到这了,更多相关Vue.js slot插槽的作用域插槽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-12

Vue中插槽slot的使用方法与应用场景详析

什么是插槽? 我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 . 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+: 插槽,其实就相当于占位符.它在组件中给你的HTML模板占了一个位置,让你来传入一些东西.插槽又分为 匿名插槽.具名插槽.作用域插槽. 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-sc

Vue+tsx使用slot没有被替换的问题

目录 前言 发现问题 解决 后记 前言 最近自己准备写一个 UI 组件,想对 vue 的 2.x.3.x 可以更深层次的掌握 在架构时,准备全部使用 tsx 书写组件 但遇到了 tsx 中使用 slot 的问题 发现问题 先写了一个基础的 card 组件: card.tsx: import Component from 'vue-class-component' import VanUIComponent from '@packs/common/VanUIComponent' import {

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法对做一下使用说明. slot插槽(不具名) <body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> <template id

Vue中slot-scope的深入理解(适合初学者)

百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的. 先抛例程: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件之通过插槽(slot)分发内容</title> <script

解决ant design vue 表格a-table二次封装,slots渲染的问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

关于VUE的编译作用域及slot作用域插槽问题

什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分发内容的出口. 插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽. 简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定: 作用域插槽的样式由父组件决定,内容却由子组件控制.简单来说:前两种插槽不能绑定数据,作用域插槽是一个带绑定数据的插槽. 下面给大家介绍V

详解Vue.js 作用域、slot用法(单个slot、具名slot)

作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component> 这里的message就是一个slot,但是它绑定的是父组件的数据,而不是组件< child-component >的数据. 父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译. <div id="app"> <child-co

vue中slot(插槽)的介绍与使用

什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.插槽显不显示.怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 Vue slot 原理 在web-components中有slot的概念,https://developers.google.com/web/fundamentals/web-components/shadowdom. <slot> 元素 Shado

Vue中的slot使用插槽分发内容的方法

本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来. 也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件.那么如何实现呢?

一篇文章搞懂:词法作用域、动态作用域、回调函数及闭包

前言 把以前一直只限于知道,却不清晰理解的这几个概念完完整整地梳理了一番.内容参考自wiki页面,然后加上自己一些理解. 词法作用域和动态作用域 不管什么语言,我们总要学习作用域(或生命周期)的概念,比如常见的称呼:全局变量.包变量.模块变量.本地变量.局部变量等等.不管如何称呼这些作用域的范围,实现它们的目的都一样: (1)为了避免名称冲突; (2)为了限定变量的生命周期(本文以变量名说事,其它的名称在规则上是一样的). 但是不同语言的作用域规则不一样,虽然学个简单的基础就足够应用,因为我们有

深入理解javascript作用域第二篇之词法作用域和动态作用域

前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识.本文是深入理解javascript作用域系列第二篇--词法作用域和动态作用域 词法作用域 第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成词法单元.这个概念是理解词法作用域

JavaScript静态作用域和动态作用域实例详解

静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量). 动态作用域–函数的作用域是在函数调用的时候才决定的 JavaScript采用的是词法作用域即静态作用域: // 静态作用域: var a = 10; function fn() { var b = 1; console.log(a + b); } fn(); // 11 在创建fn函数时的时候就已经确定了它可以作用哪些变量,如果函数fn里面有变量a就直接操作变量a,

vue中的 $slot 获取插槽的节点实例

vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中 藏着很多的 很神奇的 api,比如这个 具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo

vue+element-ui表格封装tag标签使用插槽

我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性.在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性.首先了解什么是插槽. 插槽 省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这个子组件的时候,可以自定义这个占位符所占地方呈现的样子,可能是一个标题,一个按钮,甚至一个表格,一个表单. 为什么要插槽呢?我们抽离组件的原因就是因为可重复的代码太多了,当使用可复用的组件时,大大减少了复制粘贴.设想有

浅谈javascript中执行环境(作用域)与作用域链

相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行环境分为全局执行环境和局部执行环境,其中局部执行环境我们又可以称之为函数执行环境.那么究竟什么使执行环境呢?通俗的说,执行环境即为代码执行时所处的环境.我们下来看一看如下代码,再进一步分析之. <script><br>var name="zhuzhenwei"; function changeName(){ if (name

优化Vue项目编译文件大小的方法步骤

与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小.以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的. 定位问题 要想进行优化,首先我们得清楚问题所在.即:是哪些代码/依赖包导致最后的编译文件过大? 这里,我们需要使用 webpack-bundle-analyzer 工具.修改 package.json 文件,添加: "analyze": "NODE_ENV=product