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

2024-10-02 10:50:13

没有插槽的情况

<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>

具名插槽

父组件在要分发的标签里添加 slot="xxx" 属性
子组件在对应分发的位置的 slot标签 里，添加 name="xxx" 属性
然后就会将对应的标签放在对应的位置了。如下图：

<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 新增 )

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

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
在父组件中，通过 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 中具名插槽和作用域插槽分别使用 slot 和 slot-scope 来实现，在 Vue3.x 中将 slot 和 slot-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插槽的作用域插槽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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作用域插槽问题

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

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

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

1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc
Vue.js 中的 v-cloak 指令及使用详解

先来看下vue.js 中的v-cloak 指令可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new
JS产生随机数的几个用法详解

JS产生随机数的几个用法详解 <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script> var chars = ['0','1','2','3','4','5','6','7
JS、jQuery中select的用法详解

1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></
对Vue.js之事件的绑定(v-on: 或者 @ )详解

1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g
Vue.js中 v-model 指令的修饰符详解

1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外).我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据. html: <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值&quo
对node.js中render和send的用法详解

大多数情况下,渲染内容用res.render(),将会根据views中的模板文件进行渲染.如果不想使用views文件夹,想自己设置文件夹名字,那么app.set("views","aaaa"); 如果想写一个快速测试页,当然可以使用res.send().这个函数将根据内容,自动帮我们设置了Content-Type头部和200状态码.send()只能用一次,和end一样.和end不一样在哪里?能够自动设置MIME类型. 如果想使用不同的状态码,可以: res.stat
python中for循环变量作用域及用法详解

在讲这个话题前,首先我们来看一道题: 代码1: def foo(): return [lambda x: x**i for i in range(1,5,2)] print([f(3) for f in foo()]) 伙伴们,你们认为这里产生的结果是什么呢?我们再来看下这题的变体: 代码:2 def foo(): functions=[] for i in range(1,5,2): def inside_fun(x): return x ** i functions.append(insid
SpringBatch从入门到精通之StepScope作用域和用法详解

目录 1.StepSope 是一种scope 2.StepSope 是一种自定义step 3.如何使用.@Value是支持spel表达式的 3.1 大部分场景是Spel 表达式.在底层reader/process/writer 中使用@Value获取jobParamter/stepContext/jobContext 3.2 SpEL引用bean 3.3 系统属性 3.4 运算符号 4.可能遇到问题 5.StepScope原理 6.自定义一个scope 1.StepSope 是一种scope 在