vue slot+传参
插槽分为默认插槽和具名插槽:
默认插槽:
//父组件
<div>
<h3>父组件</h3>
<testChild>
<div>默认插槽</div>
</testChild>
</div> //子组件
<div>
<h4>子组件</h4>
<slot></slot>
</div>
具名插槽:
注意:具名插槽需要包裹在 template 标签中,否则会报错
//父组件 <div>
<h3>父组件</h3>
<testChild>
<template v-slot:test>//v-slot: + 插槽名
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</template>
</testChild>
</div> //子组件
<div>
<h4>子组件</h4>
<slot name="test"></slot> //name="插槽名"
</div>
子组件向父组件传参:
//父组件
<div>
<h3>父组件</h3>
<testChild>
<template v-slot:test="data">//具名插槽,v-slot: +插槽名+ ="自定义数据名",子组件所传参数都是其属性
<ul>
<li v-for="item in data.list2">{{item.name}}</li>
</ul>
</template>
<template v-slot="dataDefalut">//默认插槽
{{dataDefalut.sName}}
</template>
</testChild>
</div> //子组件
<template>
<div>
<h4>子组件</h4>
<slot name="test" :list2="list2"></slot>
<slot :sName="name"></slot>
</div>
</template> <script>
export default {
name: "testChild",
data(){
return {
list2:[
{name:'ccc'},
{name:'ddd'}
],
name:'name'
}
}
}
</script>
结果:
vue slot+传参的更多相关文章
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue的传参方式和router使用技巧
vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...
- vue页面传参和接参
https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
- vue vue-route 传参 $route.params
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue 路由传参的三种基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
- 每日技术总结:vue router传参方式,js获取设备高度
今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...
随机推荐
- Selenium2Lib库之输入常用关键字实战
4.1 Input Text关键字 按F5 查看Input Text关键字的说明,如下图: Input Text 关键字用于向文本框输入内容,需要传2个参数(文本框的元素定位和输入的值). 项目例子: ...
- Python_跟随目标主机IP变换
''' 为了防止黑客攻击或者负载均衡,会经常变换主机,这样同一个域名在不同时间可能会对应不同的IP地址,在这种情况下可以通过 socket模块的gethostbyname()函数来实时获取目标主机的I ...
- Maven install命令理解
每一个构建都需要唯一的坐标来标识位置,我们根据坐标位置就能够下载构建至本地仓库.那么如果我们是内部项目,自定义的构建并不公开至网络上,项目成员又想依赖他怎么办呢?想想maven找寻构建的步骤. 先找寻 ...
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级: ...
- CORS 实战 专题
本文会代码层面对CORS问题进行剖析 CORS相关相关概念可参考http://www.cnblogs.com/softidea/p/5496719.html ERROR info: XMLHttpRe ...
- Spring Boot + Websocket + Thymeleaf + Lombok
https://github.com/guillermoherrero/websocket 验证错误消息文件名字:是默认名ValidationMessages.properties,编译后存放在cla ...
- bootgrid
编写bootgrid前提条件 有关bootgrid的.css和.js库文件 参数:ajax: 必须设置为true post: 传递给Java的参数 url: 与java连接的方法名 ...
- 关于JSON字符串的处理与总结 【原创】
这两天帮另一个实习生处理点前端的问题 遇到点JSON的处理 总结如下 ①一个JSON字符串 JSON.Parse(JSON字符串)—>JSON对象Object ②一个JSONArray ...
- error LNK2001: 无法解析的外部符号 解决方法
错误提示:LNK2001 无法解析的外部符号 "public: class el::base::Writer & __cdecl el::base::Writer::construc ...
- 【缩点+拓扑判链】POJ2762 Going from u to v or from v to u?
Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...