在线软件网站建设,品牌策划全案公司,江门网站设计素材,手机优化不足80怎么办深入浅出 Vue 中的插槽 slot
start
最近被问到好几次 Vue 中的插槽相关知识#xff0c;掌握的还是有些不全面。抱着重新学习的心态#xff0c;写这篇博客。首先对基础知识做一个回顾#xff0c;然后再对源码实现做一个学习。作者#xff1a;番茄编写时间#xff1a;2023…深入浅出 Vue 中的插槽 slot
start
最近被问到好几次 Vue 中的插槽相关知识掌握的还是有些不全面。抱着重新学习的心态写这篇博客。首先对基础知识做一个回顾然后再对源码实现做一个学习。作者番茄编写时间2023/11/27
1.什么是插槽
在日常代码编写的过程中针对高频出现的业务场景我会它把封装一个组件然后多个地方去使用。
但是在某些情况下一个组件并不能兼容所有的场景。
就比如对话框组件可能每个人都会用到对话框但是对话框中的内容会根据需求千变万化。这个时候就要考虑有没有什么方法可以让我们对话框中的内容变成动态的呢 答案有使用插槽就可以满足我们的需求。 插槽的概念有点类似 JavaScript 中的插值表达式在代码在保留一个占位符然后动态的向占位符中传入内容。
// 插值表达式
var name 番茄var str div
我是 ${name}
/div2. 插槽的使用
上面提到了插槽现在我们结合示例一步一步学习插槽的用法
1. 父组件引入子组件的基本用法
父组件 app.vue
templatediv idappSon/Son/div
/templatescript
import Son from ./son.vue;export default {components: {Son,},
};子组件 son.vue
templatediv classsonh1我是子组件 son/h1/div
/template运行效果 总结
上面的示例展示了一个基本的父组件使用子组件的用法。
2. 父组件在子组件中传入文本
父组件 app.vue
templatediv idappSon向子组件中传入文本/Son/div
/templatescript
import Son from ./son.vue;export default {components: {Son,},
};
/script子组件 son.vue
templatediv classsonh1我是子组件 son/h1/div
/template运行效果 总结
在父组件中使用子组件当子组件中没有插槽没有 slot/slot 的时候在父组件中向子组件中传递内容这些内容并不会展示。
3.基础插槽的使用不传入内容
父组件 app.vue
templatediv idappSon /Son/div
/templatescript
import Son from ./son.vue;export default {components: {Son,},
};
/script子组件 son.vue
templatediv classsonh1我是子组件 son/h1slot我是插槽的默认内容/slot/div
/template运行效果 总结
上面的示例是一个基础的插槽使用演示。父组件使用子组件但是不向子组件传入内容此时展示的内容是 slot默认内容/slot 中默认的内容。
4. 基础插槽的使用传入内容
父组件 app.vue
templatediv idappSon这是我自己DIY的内容/Son/div
/templatescript
import Son from ./son.vue;export default {components: {Son,},
};
/script子组件 son.vue
templatediv classsonh1我是子组件 son/h1slot我是插槽的默认内容/slot/div
/template运行效果 总结:
上面的示例是一个基础的插槽使用演示。父组件使用子组件且向子组件传入内容。
此时展示的内容是我们在父组件中传入的内容。此时就可以满足我们定制化的需要了。 这就是最基础的组件使用方法了 5. 同一个子组件需要多个插槽如何处理
掌握了插槽的基础使用方法后会有一个衍生的问题。
如果同一个组件中需要多个插槽如何处理 答 可以使用具名插槽顾名思义就是可以给插槽取名字然后根据名称去匹配插槽。 父组件 app.vue
templatediv idappSon这是我自己DIY的内容template v-slot:lazyLAZY/templatetemplate v-slot:tomatoTOMATO/template/Son/div
/templatescript
import Son from ./son.vue;export default {components: {Son,},
};
/script
style
#app {width: 400px;height: 400px;background: pink;
}
/style子组件 son.vue
templatediv classsonh1我是子组件 son/h1br /slot 我是什么都不写的插槽 /slotbr /slot namelazy 我是lazy /slotbr /slot nametomato 我是tomato /slotbr /slot 我是什么都不写222 /slotbr /slot namelazy 我是lazy /slot/div
/template
style
.son {background: yellow;
}
/style运行效果 总结
由上面的运行效果我们知道 针对一个组件中有多个插槽的情况我们可以使用 name 对插槽进行命名。然后在父组件中使用插槽的时候使用 template 标签加上 v-solt:对应插槽名称 的形式匹配到对应的插槽 在子组件组件中没有写 name 属性的插槽会默认的使用 default 名称然后匹配没有被 template 标签包裹的内容 子组件中相同 name 的插槽可以有多个 既然同一个组件中可以存在多个相同 name 的插槽是不是可以利用这个特性实现重复内容的复制 在使用v-solt 的时候注意使用的是: 冒号连接而且子组件绑定名称的时候 name 的后面不需要添加引号。 我在编写示例的时候将 v-slot:lazy 误写成 v-slotlazy 的形式了发现代码并不生效。所以请注意使用的是冒号 v-slot: 类似 v-on: v-bind: 都是指令所以这个地方不要弄混淆了。 v-slot:也和 v-on: v-bind: 类似有语法糖 # 代替即可。 v-slot:单词不要打错了正确写法 **slot**
6. 作用域插槽
除了具名插槽还有一种插槽作用域插槽。 绝大多数情况上面介绍的两种方式已经满足我们的业务需求了。 插槽默认值;父组件定义插槽内容; 这两种方式展示的数据和形式由父组件控制。 但是还有一种情况就是希望可以拿到子组件的数据然后父组件控制如何展示。 这个时候就需要使用作用域插槽了。 子组件可以设置插槽的数据然后数据如何展示由外部的组件决定。
首先在子组件中绑定一个数据 :sonListlist :向外暴露的变量名子组件内部的变量名 子组件 子组件 son.vue
templatediv classsonh1我是子组件/h1br /slot namelazy :sonListlist /slot/div
/templatescript
export default {data() {return {list: [{index: 1,name: 张三,},{index: 2,name: 李四,},{index: 3,name: 王五,},{index: 4,name: 赵六,},],}},
}
/script然后就是在父组件区使用我们的子组件然后定义子组件插槽渲染的内容 v-slot:lazydata,首先使用v-slot:lazy绑定我们的数据。然后在后面接等于号用data去接收然后再用data.子组件暴露的变量名使用 父组件 app.vue
templatediv idappSontemplate v-slot:lazydataLAZY{{ data.sonList }}/template/Son/div
/templatescript
import Son from ./son.vueexport default {components: {Son,},
}
/script总结 作用域插槽的使用方式 v-slot:插槽名接收的变量名template v-slot:插槽名接收的变量名 其实本质上就是子组件向外暴露数据父组件控制子组件具体展示。
小结
本文主要对 Vue 中的插槽的使用做了一个基础说明。
按照插槽的类型区分可以分为三类
默认插槽具名插槽作用域插槽 默认插槽就是绑定默认的内容具名插槽就是给插槽定义名称用以区分组件作用域插槽就是子组件向外暴露数据由父组件完全控制插槽内容的展示。 end
插槽的使用整体难度不大。注意一下使用的语法即可。
