Vue3.0 组件的核心概念_插槽
时间:2022-06-23
本文章向大家介绍Vue3.0 组件的核心概念_插槽,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Unsplash
Vue 在 2.6 版本中,对插槽使用 v-slot
新语法,取代了旧语法的 slot
和 slot-scope
,并且之后的 Vue 3.0 也会使用新语法,这并不是仅写法的不同,还包括了性能的提升
插槽分为普通插槽和作用域插槽,普通插槽为父组件传递数据/元素/组件给子组件,而子组件定义 <slot>
接收,当插槽有多个的时候,需要使用具名插槽 <slot name="xxx">
,用于将数据绑定在指定的插槽
// 父组件
<p slot="item">old Nian糕</p>
// 子组件
<slot name="item" />
// 父组件
<template v-slot:item>
<p>new Nian糕</p>
</template>
// 子组件
<slot name="item" />
作用域插槽为子组件 <slot>
绑定属性,传递数据给父组件,父组件通过 v-slot:xxx="props"
接收子组件传递的属性
// 父组件
<p slot="love" slot-scope="props">爱{{ props.name }}真是太好了</p>
// 子组件
<slot name="love" v-bind="{ name }" />
export default {
data() {
return {
name: "Nian糕"
}
}
}
// 父组件
<template v-slot:love="props">
<p>爱{{ props.name }}真是太好了</p>
</template>
// 子组件
<slot name="love" v-bind="{ name }" />
export default {
data() {
return {
name: "Nian糕"
}
}
}
运行结果
End of File
行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用Python爬取股票数据,绘制K线和均线并用机器学习预测股价(来自我出的书)
- 用非常硬核的JAVA序列化手段实现对象流的持久化保存
- 微信小程序语音同步智能识别的实现案例
- 数据结构之链式队列的代码实现及有趣应用
- 用自定义链式栈解决力扣括号匹配问题
- String及StringTable(三):StringBuilder源码解读
- UidGenerator:百度开源的分布式ID服务(解决了时钟回拨问题)
- String及StringTable(四):StringBuffer与StringBuilder对比
- Apache James 2.3.2.1 邮箱服务搭建
- SpringBoot实现微信小程序登录的完整例子
- String及StringTable(五):java8的新工具类StringJoiner
- spring security oauth2使用refresh_token报错UserDetailsService is required
- 你所不知道的React| 趋势解读、底层逻辑、学习路径、实战应用
- js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
- TKinter Label 和 Button