脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.js slot插槽的作用域插槽

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

 更新时间：2021年09月14日 10:29:31   作者：猫老板的豆  
这篇文章主要介绍了Vue.js slot插槽的作用域插槽用法详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

没有插槽的情况

<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 中具名插槽和作用域插槽分别使用 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插槽的作用域插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在vue3中动态加载远程组件的流程步骤

    在vue3中动态加载远程组件的流程步骤

    在一些特殊的场景中（比如低代码、减少小程序包体积、类似于APP的热更新）,我们需要从服务端动态加载.vue文件,然后将动态加载的远程vue组件渲染到我们的项目中,今天这篇文章我将带你学会,在vue3中如何去动态加载远程组件,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • 使用Mockjs模拟接口实现增删改查、分页及多条件查询

    使用Mockjs模拟接口实现增删改查、分页及多条件查询

    Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发,下面这篇文章主要给大家介绍了关于使用Mockjs模拟接口实现增删改查、分页及多条件查询的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台。这篇文章主要介绍了Vue+SpringBoot开发V部落博客管理平台,需要的朋友可以参考下
    2017-12-12
  • vue访问未定义的路由时重定向404问题

    vue访问未定义的路由时重定向404问题

    这篇文章主要介绍了vue访问未定义的路由时重定向404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • uni-app中使用ECharts配置四种不同的图表(示例详解)

    uni-app中使用ECharts配置四种不同的图表(示例详解)

    在uni-app中集成ECharts可以为我们的应用提供强大的图表功能,我们详细说一下如何在uni-app中使用ECharts,并配置四种不同的图表,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • vue实现按钮切换图片

    vue实现按钮切换图片

    这篇文章主要为大家详细介绍了vue实现按钮切换图片，正向反向以及顺序切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue瀑布流组件实现上拉加载更多

    vue瀑布流组件实现上拉加载更多

    这篇文章主要为大家详细介绍了vue瀑布流组件实现上拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    这篇文章主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
    2018-05-05
  • Vue实现一个返回顶部backToTop组件

    Vue实现一个返回顶部backToTop组件

    本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07
  • Vue组件通信之父传子与子传父详细讲解

    Vue组件通信之父传子与子传父详细讲解

    这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-10-10

最新评论