谈下slot-scope
2024-09-01 05:52:55
Vue里有个slot插槽的概念,常用的一般是命名的slot和默认的slot,
这里谈下slot-scope,Vue2.6后改成v-slot
slot-scope场景是父组件用子组件的数据,但是样式自己的,如果父组件不写,就默认自己的
代码如下,子组件:
<div>
<slot :data="name">
<p>默认的: {{ name }}</p>
</slot>
</div>
这里注意,:data相当于子组件传递给父组件的数据
父组件的使用如下
<v-child>
<template slot-scope="data">
<p>父级样式:{{ data.data }}</p>
</template>
</v-child>
这里slot-scope相当于接收子组件传递过来数据,这里数据结构是:{子组件的:data: 子组件数据},所以需要data,(如果子组件是:user,那么父组件是.user)
注:一旦使用slot-scope后,子组件内其他scope都变成slot-scope
下面是2.6.0以上版本
写法, 子组件不变,父组件变为
<v-child v-slot="data">
<p>父级样式:{{ data.user }}</p>
</v-child>
最新文章
- jQuery-1.9.1源码分析系列完毕目录整理
- 解决ERROR 2003 (HY000): Can&#39;t connect to MySQL server on
- 使用eclipse搭建hadoop开发环境
- php自定义函数call_user_func和call_user_func_array详解
- 比较compareTo与equals及==的区别
- java.lang.IllegalArgumentException: Requested window android.os.BinderProxy@450b2f48 异常处理
- 【 D3.js 高级系列 — 9.0 】 交互式提示框
- Windbg Extension NetExt
- .net后台代码临时表创建
- [妙味JS基础]JS热身运动
- (中等) POJ 2886 Who Gets the Most Candies? , 反素数+线段树。
- Linux下*.tar.gz/.tar.bz2 文件解压缩安装命令
- jquery-Ajax请求用例码
- error2019-01-17 宏STDOUT_FILENO
- Js表单验证控件-02 Ajax验证
- 关于python中selector问题
- jmeter简单压测设置
- 1.php代码块
- JavaScript console控制台调试 post
- php fwrite写入文件bom头导致的乱码问题解决
热门文章
- 类选择器练习:Google 案例
- Xcode10:library not found for -lstdc++.6.0.9 临时解决
- Bootstrap File Input 的使用
- moco响应中文乱码
- .net core mysql CodeFirst
- Java容器解析系列(17) LruCache详解
- 一个注解搞懂 Sentinel,@SentinelResource 总结
- 认识Class -- 终于不在怂
- JS-08-对象
- Ubuntu 获取 root 用户权限并以 root权限登录