Vue slot用法（2018.09.05 星期三）

每日总结

Vue slot用法

概念

插槽，通俗一点的说法就是给公共组件留坑

用法

你的组件<navigation-link>

<av-bind:href="url"class="nav-link"
><slot></slot>
</a>
复制代码

使用该组件

<navigation-link url="/profile">Your Profile
</navigation-link>
复制代码

当组件渲染的时候，这个元素将会被替换为“Your Profile”

具名插槽

你的组件<navigation-link>

<av-bind:href="url"class="nav-link"
><slot name="title"></slot>
</a>
复制代码

使用该组件

<navigation-link url="/profile"><h1 slot="title">Your Profile</h1>
</navigation-link>
复制代码

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口

注意：slot坑不能给class，应该在外面包裹一个div，给div一个class，然后在对应使用组件的那个页面给使用slot的标签样式

vue相关插件：Moment.js JavaScript 日期处理类库

转载于:https://juejin.im/post/5b9b69f2f265da0a9a395b5c

Vue slot用法（2018.09.05 星期三）相关推荐

slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
Vue slot 建议用法
Vue slot 插槽文章目录 Vue slot 插槽前言一.什么时候用到插槽二.使用建议 1.老版本 (slot-scope) 2.vue2.6+ 或 vue3 (v-slot) 总结前言 ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
Vue slot 详解
在Vue中,我们使用组件来组织页面和组织代码,类似于搭积木,每一个组件都是一个积木,使用一些相同或者不同组件就能搭建出我们想要的页面.slot(插槽)是组件功能的重要组成部分,插槽必须用于组件才有意义 ...
2018.09.22 上海大学技术分享 - An Introduction To Go Programming Language
老实说笔者学习 Go 的时间并不长,积淀也不深厚,这次因缘巧合,同组的同事以前是上海大学的开源社区推动者之一,同时我们也抱着部分宣传公司和技术分享的意图,更进一步的,也是对所学做一个总结,所以拟定了这 ...
2018.09.26朴素贝叶斯算法研究日志
2018.09.26朴素贝叶斯算法研究日志前些天研究的遗传算法遇到瓶颈,所以转而研究朴素贝叶斯,同时也让自己休息一下,多查询遗传算法的文档然后进一步研究.朴素贝叶斯算法是最简单的一种贝叶斯算法.本文 ...
深入理解vue slot插槽
单个插槽只使用这个标签的话,可以将父组件放在子组件的内容,放到想让他显示的地方具名插槽将放在子组件里的不同html标签放在不同的位置父组件在要分发的标签里添加 slot='name' 属性子 ...
c3520 宝骏凯立德地图_凯立德2018车载导航地图-2018年05月凯立德高清优化版C2939-C7M05-3H21J22最新版 - 极光站...
2018年05月凯立德高清优化版C2939-C7M05-3H21J22是凯立德2018车载导航地图!经常使用凯立德的,可以下载最新版本.3H21J22春季版,非常不错.在这里,小编为你提供懒人包百度网 ...
《OSChina每日一博》2018年05月整理合集
<OSChina每日一博>2018年05月整理合集简介收录开源中国每日推荐的优秀博客文章,开源中国每日会推荐一篇比较优秀的博客文章,称之为每日一bo,文章实属精品,收藏于此,供自己慢慢 ...
vue+filter+html标签,vue过滤器用法实例分析
本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... {{msg|currency ￥}} ...

Vue slot用法（2018.09.05 星期三）

每日总结

Vue slot用法

概念

用法

具名插槽

Vue slot用法（2018.09.05 星期三）相关推荐

最新文章

热门文章