vue组件间传值之插槽

这篇具有很好参考价值的文章主要介绍了vue组件间传值之插槽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。

vue中插槽也是父子组件通讯的一种方式。

组件最大的特性就是复用性,插槽能大大提高组件的复用性。

  1. 通过插槽 ,父组件可以把一段(模板的)结构传递给子组件 。
  2. 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
  3. vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽

组件插槽的基本使用

        <div id="app">
			<my-com>Hello </my-com>
			<my-com>
				<a href="">点击</a>
			</my-com>
			<my-button>点击</my-button>
			<my-button>提交</my-button>
			<my-button @click="num++">
				<div>总共点击了{{num}}次</div>
			</my-button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						num:0
					}
				},
				methods: {
				},
			});
			app.component("MyCom",{
				template:`<div class="my-com">
					子组件
					<div>
					<slot></slot>
					</div>
				</div>`,
			});
			app.component("MyButton",{
				template:`<button>
					<slot></slot>
				</button>`,
			});
			app.mount("#app");
		</script>

具名插槽

  • 具有名字的插槽
  • 使用 中的 “name” 属性绑定元素
  • 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上 如果没有匹配到 则放到匿名的插槽中
        <div id="app">
			<my-com>
				<!-- 具名插槽 -->
				<template v-slot:header>头部</template>
				<template v-slot:default> 默认插槽</template>
				<!-- <template v-slot:footer>底部</template> -->
				<!-- 简写 v-slot用#代替-->
				<template #footer>底部</template>
			</my-com>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						num:0
					}
				},
				methods: {
				},
			});
			app.component("MyCom",{
				template:`<div class="my-com">
					<div class="header">
						<slot name="header"></slot>
					</div>
					<div class="body">
						<slot></slot>
					</div>
					<div class="footer">
						<slot name="footer"></slot>
					</div>
				</div>`,
			});
			app.mount("#app");
		</script>

总之,slot存在于子组件,v-slot在父组件,最终页面展示结果是父组件!!!

作用域插槽:父组件对子组件的内容进行加工处理。

作用域插槽也可以理解为带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

        <div id="app">
			<my-com>
				<!--子给父传:父组件接受子组件传过来的值 -->
				<template v-slot:header="data">
					<!-- data只能在当前模板内部使用 -->
					头部
					{{data}}
					<br>
					{{data.msg}}
				</template>
				<!--解构赋值: v-slot:default="msg,age" -->
				<template v-slot:default="{msg:text,age}"> 
					默认插槽
					<!--msg 别名text -->
					{{text}}
					{{age}}
				</template>
				<template #footer>底部</template>
			</my-com>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						num:0
					}
				},
				methods: {
				},
			});
			app.component("MyCom",{
				template:`<div class="my-com">
					<div class="header">
						<slot name="header" :msg="msg" :age="age"></slot>
					</div>
					<div class="body">
						<slot :msg="msg" :age="age"></slot>
					</div>
					<div class="footer">
						<slot name="footer"></slot>
					</div>
				</div>`,
				data(){
					return{
						msg:"Jack",
						age:10,
					}
				}
			});
			
			app.mount("#app");
		</script>

结果:

vue组件间传值之插槽

父组件给子组件数据,在父组件可以通过:data的形式实现:

        <div id="app">
			<my-com>
				<template v-slot:header :data="datas">
					<!-- data只能在当前模板内部使用 -->
					头部
					{{datas}}
					<br>
					{{datas.msg}}
				</template>	
			</my-com>
		</div>

补充:作用域插槽与element-plus的联合使用

        <div id="app">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="日期" prop="date" width="180">
				</el-table-column>
				<el-table-column label="名字" prop="name" width="180">
					<template #default="{row}"><span>{{row.name}}</span></template>
				</el-table-column>
				<el-table-column label="地址" prop="address" width="180">
				</el-table-column>
				<el-table-column label="Operations">
					<template #default="{row}">
						<el-button @click="onClick(row)" type="success">详情</el-button>
					</template>
				</el-table-column>
			  </el-table>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.10/index.full.min.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						num:0,
						tableData:[
						  {
						    date: '2016-05-03',
						    name: 'Tom',
						    address: 'No. 189, Grove St, Los Angeles',
						  },
						  {
						    date: '2018-05-20',
						    name: 'Jack',
						    address: 'No. 189, Grove St, Los Angeles',
						  },
						  {
						    date: '2020-05-04',
						    name: 'Rose',
						    address: 'No. 189, Grove St, Los Angeles',
						  },
						  {
						    date: '2022-11-29',
						    name: 'Lucy',
						    address: 'No. 189, Grove St, Los Angeles',
						  },
						]
					}
				},
				methods: {
					onClick(row){
						console.log(row);
					}
				},
			});
			app.use(ElementPlus);//注册组件
			app.mount("#app");
		</script>

 文章来源地址https://www.toymoban.com/news/detail-439962.html

到了这里,关于vue组件间传值之插槽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3父子组件间传参通信

    本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3+TypeScript 父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps接收使用。 如下为父组件 Father.vue 如下为子组件Son.vue 父组件 Father.vue 中在调用 Son.vue 这个子

    2024年01月19日
    浏览(77)
  • C# AsyncLocal 是如何实现 Thread 间传值

    这个问题的由来是在 .NET高级调试训练营第十期 分享ThreadStatic底层玩法的时候,有朋友提出了 AsyncLocal 是如何实现的,虽然做了口头上的表述,但总还是会不具体,所以觉得有必要用 文字+图表 的方式来系统的说一下这个问题。 在 C# 编程中实现多线程以及线程切换的方式大

    2024年01月25日
    浏览(48)
  • C# Winform 多进程窗体间传值->SendMessage()

    在 C# 的 Windows Forms 中,使用 Windows API 的 SendMessage 方法可以实现窗口间的消息通传递,当然也可以在不同的进程之间发送消息。接下来,我将为您提供一个基本的示例,演示如何使用 SendMessage 以及如何重写 WndProc 方法来接收并处理消息。 首先,你需要添加对Windows API的引用:

    2024年02月14日
    浏览(43)
  • Vue——动态组件、插槽

    1.ref属性(也可以实现组件间通信:子和父都可以实现通信) ref放在 标签 上,拿到的是 原生的DOM节点 ref放在 组件 上,拿到的是 组件对象  ,对象中的数据、函数 都可以直接使用 通过这种方式实现子传父(this.$refs.mychild.text) 通过这种方式实现父传子(调用子组件方法传

    2024年02月01日
    浏览(34)
  • Vue组件之间传值

    首先总结一下vue里面传值的几种关系: 如上图所示, A与B、A与C、B与D、C与F组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与F是堂兄关系,针对以上关系 我们把组件之间传值归类为: 1.父子组件之间的通讯 2.非父子组件之间的通讯(兄弟组件 隔代

    2024年02月09日
    浏览(40)
  • Vue 组件之间传值

    一、Vue 组件之间传值的主要方法 Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似,但是有一些语法和 API 上的改变,主要的传值方法有以下几种: 1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

    2024年02月02日
    浏览(42)
  • vue 进阶---动态组件 插槽 自定义指令

    目录 动态组件 如何实现动态组件渲染 使用 keep-alive 保持状态 keep-alive 对应的生命周期函数 keep-alive 的 include 属性和exclude属性  插槽 插槽的基础用法 具名插槽 作用域插槽 自定义指令 自定义指令的分类 私有自定义指令 全局自定义指令 了解 eslint 插件的 配置 axios 挂载到

    2024年02月13日
    浏览(47)
  • 【vue2】组件进阶与插槽详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :v-modedl表单双向绑定、ref|$ref操作dom、dynamic动态组件、$nextTick同步、匿名插槽、具名插槽、作用域插槽 目录(文末有给大家准备好的Xmind思维导图) 一、组件进阶 1.

    2024年02月03日
    浏览(40)
  • Vue.js 中的插槽是什么?如何使用插槽?

    在 Vue.js 中,插槽是一种组件之间通信的机制,允许父组件向子组件传递内容,并在子组件中进行渲染。本文将介绍 Vue.js 中插槽的概念、优势以及如何使用插槽。 在 Vue.js 中,插槽是一种组件之间通信的机制,允许父组件向子组件传递内容,并在子组件中进行渲染。Vue.js 中

    2024年02月07日
    浏览(42)
  • vue3 父子组件传值 记录

    最近这个组件之间传值用的较多,我这该死的记性,总给忘记写法,特此记录下 补充:LeftView.vue 是父组件; Video.vue 是子组件 Video.vue 子组件 LeftView.vue 父组件 第一步 创建bus.js文件 第二步 分别在需要相互传参的组件中引入bus.js文件,并相互传参

    2024年02月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包