vue学习17-插槽作用域
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<container>
<template v-slot:header="headerProps">
{{headerProps.navs}}
</template>
</container>
</div>
<script>
Vue.component("container",{
template:`
<div>
<div class="header">
<slot name="header" :navs="navs"></slot>
</div>
</div>
`,
data : function(){
return {
navs:['你','我','他']
}
}
},) new Vue({
el:'#app',
data:{
}
}
)
</script>
</body>
</html>
vue学习17-插槽作用域的更多相关文章
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- vue学习之插槽
插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...
- Vue学习笔记-插槽基本使用
为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...
- vue中插槽作用域的使用
一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...
- Vue学习笔记：Slot
转自:https://www.w3cplus.com/vue/vue-slot.html 在Vue中,slot也分多种,从Vue的官网中可以获知,其主要分为:单个插槽.具名插槽和作用域插槽三种 父组件 ...
- VUE学习总结
VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- vue学习的笔记补充
// vue-router中可以使用 routes:[ { path:'/', name:'index', component:()=>import('./index') } ] // 这种写法 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
随机推荐
- PowerDotNet平台化软件架构设计与实现系列（09）：消息平台
消息队列已经几乎成为大中型高吞吐应用的标配,继续根据我们一贯的节约代码的风格,为了复用的目标,抽象出消息队列平台,进行消息队列管理. 环境准备 1.(必须).Net Framework4.5+ 2.( ...
- vim操作（复制，粘贴）
整行操作 单行复制 在"命令"模式下,将光标移动到将要复制的行处,按"yy"进行复制 多行复制 在"命令"模式下,将光标移动到将要复制的首行 ...
- Caused by: redis.clients.jedis.exceptions.JedisDataException: READONLY You can't write against a read only slave.
Caused by: redis.clients.jedis.exceptions.JedisDataException: READONLY You can't write against a rea ...
- 1030 - Discovering Gold
1030 - Discovering Gold PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 M ...
- select......for update会锁表还是锁行
select查询语句是不会加锁的,但是select .......for update除了有查询的作用外,还会加锁呢,而且它是悲观锁. 那么它加的是行锁还是表锁,这就要看是不是用了索引/主键. 没用索 ...
- MySQL定时备份数据库方案
MySQL数据备份 1.备份全部数据库的数据和结构 mysqldump -uroot -p123456 -A > /data/mysqlDump/mydb.sql 2.备份全部数据库的结构(加 ...
- 「算法笔记」FHQ-Treap
右转→https://www.cnblogs.com/mytqwqq/p/15057231.html 下面放个板子 (禁止莱莱白嫖板子) P3369 [模板]普通平衡树 #include<bit ...
- JWT+SpringBoot实战
往期内容:JWT - 炒焖煎糖板栗 - 博客园 (cnblogs.com) JWT可以理解为一个加密的字符串,里面由三部分组成:头部(Header).负载(Payload).签名(signature) ...
- Linux_Vmtools的重安装与设置共享文件夹
前置准备 已经安装了Linux的Vm虚拟机 2. 虚拟机上已经安装gcc 重装Vmtools Part1 用root账号登录Linux 弹出原来cd Vm菜单栏 - 虚拟机(M) - 重新安装VmWa ...
- 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...