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),商品 ...
随机推荐
- 洛谷 P1041 错解
P1041 传染病控制 题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染 ...
- STM32f030f4p6 内部flash 打包读写
最近做到的项目在运行需要把一组uint8_t(unsigned char)的数据进行掉电储存,想到单片机STM32f030f4p6内部flash可以直接由程序操作,写了以下代码用于uint8_t数据打 ...
- Unity3D学习(六):《Unity Shader入门精要》——Unity的基础光照
前言 光学中,我们是用辐射度来量化光. 光照按照不同的散射方向分为:漫反射(diffuse)和高光反射(specular).高光反射描述物体是如何反射光线的,漫反射则表示有多少光线会被折射.吸收和散射 ...
- 数据结构(C++)之Double Linked List实践
//double linked list (type int),the position starts from 0 #include <iostream> using namespace ...
- awk高级玩法
1. 程序元素 一个awk 程序是一对以模式(pattern) 与大括号框起来的操作(action) 组合而成的,或许,还会加上实现操作细节的函数(function ) .针对每个匹配于输人数据的模式 ...
- SVN更新失败,提示locked 怎么破
有时在svn更新或提交代码时,会报错,让你cleanup 如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...
- 25.创业真的需要app吗?真的需要外包吗?
两个星期前,一名亲戚的朋友打算投入自己的二十多万元去搞个摄影社交app,问我有没有靠谱的外包推荐,我赶紧劝住他,现在app的成本已经非常高了,初期的研发就要十几万,加上后期的推广(每个用户成本大概2元 ...
- CORS(跨域资源共享) 的配置
http://blog.csdn.net/ohyoyo2014/article/details/24863197 兼容情况: 各种新版本的ie10,firefox,opera,safari,chrom ...
- Python eval 函数妙用
eval 功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source, globals, locals) -> value 参数: source:一个Python ...
- ubuntu16.04如何安装搜狗输入法
1 . 首先我们需要先来下载支持linux版本的搜狗输入法安装包,这里我们先查看下自己的ubuntu系统是什么版本的,这里我们可以在右上角的那个齿轮图标点击查看"系统设置",在里面 ...