文章目录
什么是插槽？
一：匿名/默认插槽
二：后备内容
三：具名插槽
四: 动态插槽
五：（1）作用域插槽
（2）作用域插槽动态绑定接受方法
六：vue2和vue3插槽的区别和使用
什么是插槽？
- 插槽就像放在组件中的占位标签，使用组件时我们将要放到占位标签处的DOM结构写入组件标签体中即可。
- 通俗点来讲，插槽就是在自定义组件中预留一个位置，这个位置的内容可以由使用组件的人来定义，可以通过属性等数据实现动态的内容展示及交互，具有高度的灵活性。
一：匿名/默认插槽
标签：<slot></slot>
使用方法：
- 插槽一般定义在子组件中，相当于一个占位。<slot></slot>
- 父组件模板中的子组件标签要写成一对的样式，即：<Category></Category>
- 这样<Category></Category>中的内容就会显示在子组件<slot></slot>标签的位置。
- 如果<Category></Category>中没有内容，<slot></slot>标签中的内容就会显示在页面
示例代码：
在父级模板中使用该组件时，对应位置的内容会被插入到默认插槽处：
二：后备内容
此处所说的后备内容是官方文档里面的叫法，实际上就是指插槽的默认值。在定义组件时，可以在之间给出插槽的默认内容，也就是说当使用插槽时如果没有在组件标签内定义插槽的内容，则默认内容生效，否则默认内容不生效。
例如：定义组件插槽设置默认内容
不使用默认值，覆盖
页面展示内容为：
三：具名插槽
一个子组件可能有多个插槽，不同的插槽放置不同的内容，为了区分不同的插槽，每个插槽应该，这就是。
可以通过给 元素添加 name 属性来创建具名插槽，然后在父组件中使用
v-slot ：name 来引用具名插槽。
四: 动态插槽
在 上也是有效的，即可以定义下面这样的动态插槽名：
五：（1）作用域插槽
作用域插槽的应用场景：
在中，而根据数据生成的在上。（插槽的使用者即使用子组件的父组件).
传递数据
因为（父组件）需要使用子组件的数据， 所以需要将数据从子组件传递到中。
- 子组件的传递方法：利用插槽标签结合v-bind指令进行传递：
可以传递多个数据 - 父组件接收数据的方法有两种：默认作用域
默认作用域插槽接受方法
- 接收的方法：通过子组件的指令直接接受一个插槽的对象。
子组件传入插槽的作为指令的值可以在插槽内的表达式中访问。
具名作用域插槽接受方法
具名作用域插槽的工作方式和普通作用域插槽的工作方式类似，插槽的可以作为指令的值被访问到，也可以使用简写访问。
解构：
子组件传递props属性：
父组件接受props属性：
父组件headerProps接受到的数据是 子组件标签的属性是不会传递给插槽的。
默认作用域插槽和具名作用域插槽一起使用：
当一起使用的时候相当于为默认插槽设置了一个的名字，使用标签和接受默认作用域插槽的属性值。具名作用域插槽正常使用即可。
（2）作用域插槽动态绑定接受方法
插槽的使用者接收的方法：使用<template></template>标签的scope属性接收从子组件通过<slot>标签传递过来的所有数据，接收到的数据是一个对象。
也可以使用<template></template>标签的slot-scope属性接收数据。
scope和slot-scope接收数据支持解构赋值
注意：不需要name
使用：
- 子组件category.vue —— 数据在子组件中
- 父组件App.vue() —— 结构在父组件中
无渲染组件
简单来说就是：只有逻辑内容没有渲染内容的子组件叫做无渲染组件，子组件的渲染通过具名插槽全权交给父组件渲染。
如果我们将这个概念拓展一下，可以想象的是，一些组件可能，视图输出通过作用域插槽全权交给了。我们将这种类型的组件称为
插槽总结
- 插槽的作用：
让父组件可以向子组件指定位置插入，也是一种组件间通信的方式，适用于。
使用插槽的时候父组件向子组件传递的html内容，在组件实例对象的上存储着父组件向子组件传递的html内容
六：vue2和vue3插槽的区别和使用
Vue2和Vue3的插槽系统有一些差异，但基本概念相同。
- 默认插槽：
在Vue2中，可以使用来定义默认插槽。在Vue3中，默认插槽不需要特殊标记，可以直接通过模板使用。
- 具名插槽：
在Vue2中，可以通过来定义具名插槽，然后在父组件中使用来填充。在Vue3中，插槽的定义和使用方法保持一致，只是指令形式有所变化，使用代替。
- 作用域插槽：
在Vue2中，可以通过传递数据到具名插槽，子组件通过来接收插槽。在Vue3中，使用来接收作用域插槽的数据，其中是一个包含传递数据的对象。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/41019.html