vue插槽(slot)的模板与JSX写法
vue官网API:
插槽:https://cn.vuejs.org/v2/guide/components-slots.html
JSX:https://cn.vuejs.org/v2/guide/render-function.html
说明:vue版本2.6.0以上语法
一、插槽模板传值
子组件:child.vue
<template>
<div>
<!-- 默认插槽 -->
<slot :info="info"></slot>
<!-- other插槽 -->
<slot name="other" :info="info2"></slot>
</div>
</template> <script>
export default {
data() {
return {
info: {
title: "标题一"
},
info2: {
title: "标题二"
}
};
}
};
</script>
父组件:parent.vue
<child>
<template v-slot:default="slotProps">
<div>
{{ slotProps.info.title }}
</div>
</template>
<template v-slot:other="slotProps">
<div>
{{ slotProps.info.title }}
</div>
</template>
</child>
结果:
二、插槽传值JSX写法
子组件:child.jsx
export default {
data() {
return {
info: {
title: "标题一"
},
info2: {
title: "标题二"
}
};
},
render() {
return (
<div>
{this.$scopedSlots.default({
info: this.info
})} {this.$scopedSlots.other({
info: this.info2
})}
</div>
);
}
};
父组件:parent.jsx
<child
scopedSlots={{
default: props => {
return (
<div style="line-height: 30px;">
{props.info.title}
</div>
);
},
other: props => {
return (
<div style="line-height: 30px;">
{props.info.title}
</div>
);
}
}}
/>
结果:
vue插槽(slot)的模板与JSX写法的更多相关文章
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- vue 插槽slot总结 slot看这篇就够了
一直模糊所以梳理一下,看了好多篇园友的文章和官网文档在这整理一下 默认插槽 //slot组件<template> <div class="slots"> s ...
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
- vue 插槽 ------ slot 简单理解
solt 插槽 内容分发 什么是插槽 Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...
- Vue插槽slot理解与初体验 ~
一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...
- vue 插槽 slot
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue 插槽 slot的简单实用
随机推荐
- Java设计模式(三)简单工厂模式
定义与类型 定义:由一个工厂对象决定创建出哪一种产品类的实例 类型:创建型,但不属于GOF23种设计模式 适用场景 工厂类负责创建的对象比较少 客户端(应用层)只知道传入工厂类的参数,对于如何创建对象 ...
- linux基础之IO模型
一.IO模型 一次read操作: (1)等待数据准备好:从磁盘到内核内存 (2)从内核内存复制到进程内存 示意图如下: I/O类型: 同步和异步:synchronous,asynchronous 关注 ...
- nodejs events
EventEmitter类 events模块提供一个对象:events.EventEmitter,核心是事件触发和事件监听的封装. 大多数时候不会直接使用EventEmitter,而是在对象中继承它( ...
- Educational Codeforces Round 82 (Rated for Div. 2)
题外话 开始没看懂D题意跳了,发现F题难写又跳回来了.. 语文好差,码力好差 A 判第一个\(1\)跟最后一个\(1\)中\(0\)的个数即可 B 乘乘除除就完事了 C 用并查集判一下联通,每个联通块 ...
- 简单记账本APP开发二
今天主要是进行了适配器的编写,数据库的创建以及对完善了业务逻辑,简单的APP到此已经通过测试可以使用.
- 错误 CS0234 命名空间“Microsoft”中不存在类型或命名空间名“Reporting”(是否缺少程序集引用?)
VS2017 使用Microsoft Rdlc报表设计器出现以下错误: 错误 CS0234 命名空间“Microsoft”中不存在类型或命名空间名“Reporting”(是否缺少程序集引用?) 以及其 ...
- C# 一次循环获取树的两种方法
第一种方法好些 第二种方法如果中间断开就会成为一级 private static List<Menu> MenuTree() { , ParentId = , Name = "a ...
- Sql Server2008忘记sa登陆密码
Sql的sa登陆密码忘记解决方法: 语句执行的前提: 1.系统可以登陆进去(当不记得sa密码的时候,可以使用windows用户验证的方式进行登陆) 2.平时用sa登陆,点了记住密码但是不记得密码是多少 ...
- Spring学习笔记-装配Bean-02
什么是装配 创建应用对象之间写作关系的行为通常称为装配(wiring),这也是依赖注入(DI)的本质. Spring配置的可选方案 Spring提供了3中主要的装配机制: ● 在XML中进行显式配置. ...
- C 库函数 - sprintf()
C 库函数 - sprintf() C 标准库 - <stdio.h> 描述 C 库函数 int sprintf(char *str, const char *format, ...) 发 ...