文档章节

vue组件-template 和slot插槽

suna123
 suna123
发布于 2017/08/09 17:29
字数 264
阅读 2209
收藏 2
vue

1.组件template

vue组件子组件引用,在父组件中引用,引用方式通过from

import NavHeader from '../components/NavHeader.vue'
import NavFooter from '@/components/NavFooter.vue'
import NavBread from '@/components/NavBread.vue'

import后的为引入后的组件名,其中@表示是src,通过@不用一层层往上找目录,可以直接写,@的配置在webpack.base.conf.js中。

组件引入后在要在父组件中用标签的形式写入子组件,写入的方式:

<nav-header></nav-header>
<nav-footer></nav-footer>

在templat中要将组件的名称该为小写,两个单词直接加“-”。

2.slot插槽

slot插槽的使用,在子组件中直接使用

<slot></slot>  //子组件NavBread

在父组件中的该组件名称(nav-bread)里直接写需要的内容

<nav-bread>
  <span slot="bread">goods</span>
  <span>测试</span>
</nav-bread>

如果需要多个插槽,slot用name属性标识。在在父组件中的该组件名称(nav-bread)里的内容中加上“slot="name值"”

<slot name="bread"></slot>  //name值为bread
<slot name="test"></slot>
<span slot="bread">goods</span> //slot值为bread
<span slot="test">测试</span>

 

© 著作权归作者所有

上一篇: JS的DOM节点
下一篇: axios小记
suna123
粉丝 3
博文 18
码字总数 8841
作品 0
昌平
网页/平面设计
私信 提问
深入浅出vue组件之使用slot分发

在实际项目开发当中,时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为 插槽。今天主要来介绍了vue组件详解之使用slot分发内容及...

前端攻城老湿
2018/11/29
0
0
Vue组件三-Slot分发内容

Vue组件三-Slot分发内容 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父...

mdiep
2018/05/13
0
0
[Vue] slot详解,slot、slot-scope和v-slot

slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏。 Vue的slot,是组件...

夜雪暮歌
04/13
0
0
07、Vue.js---Vue对象的实例方法和属性

Vue对象的实例属性和方法分为全局和局部实例属性和方法。全局和局部的区别在于调用者不同。 · 局部实例属性和方法: vm | this .$方法名或属性; · 全局实例熟悉和方法: Vue .方法名或属性...

秋季长青
2018/07/18
0
0
没有废话的vue进阶( 一 )

组件分类 vue组件主要包含: 由vue-router产生的页面,可以称之为路由组件 独立基础组件:例如Date和input这之类的可以全局复用的基础组件 业务组件,除了以上两种就是业务组件 组件精髓 pr...

张不怂
05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Command模式

https://www.cnblogs.com/devinzhang/archive/2012/01/06/2315235.html

南桥北木
43分钟前
1
0
由于PostgreSQL9.x二进制输出格式默认值改变导致的读取图片错误

今天从社区邮件看到一个这样的问题,感觉很有意思,在这分享给大家~具体如下: 问题现象: 作者有一个很老的Java应用,当时后端采用的PostgreSQL数据库版本为8.x,该系统除了正常的数据增删...

闻术苑
59分钟前
2
0
导入sql时出现Invalid default value for 'create_time'报错处理方法

当运行SQL会出现:[Err] 1067 - Invalid default value for 'create_time',是因为Mysql版本不同,如果版本不 < 5.6请去的话报错的处理方法如下: 方法 :alter table table_name modify cre......

writeademo
今天
1
0
对ssm(spring,springmvc,mybatis)的了解总结

ssm框架现在是java web开发的三个主流框架 ,其实严格来算只算是两个框架,因为springmvc属于spring框架 ,是spring的一个mvc子框架 那么我们下面就来了解一下三大框架把 一 .Spring spring...

咸鱼-李y
今天
2
0
聊聊Elasticsearch的FsProbe

序 本文主要研究一下Elasticsearch的FsProbe FsProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/fs/FsProbe.java public class FsProbe { private static f......

go4it
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部