前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue组件-template和slot插槽详细介绍

vue组件-template和slot插槽详细介绍

作者头像
Javanx
发布2019-09-04 10:24:14
7.8K0
发布2019-09-04 10:24:14
举报
文章被收录于专栏:web秀

前言

vue项目,组件应用非常广泛,感觉只要能被多个地方复用的代码,都可以写成组件,这样不用做重复的工作。github上面也有很多大牛制造了n个轮子,方便大家使用。之前也有总结过vue组件集合,没有了解的同学请点击《vue插件总结——总有你能用上的插件》。今天详细介绍vue组件该怎么用?怎么写?

vue组件-template和slot插槽详细介绍
vue组件-template和slot插槽详细介绍

怎么用

vue组件开发好后,在父组件中引用,并在components注册,引用方式通过from,如

代码语言:javascript
复制
import NavHeader from '../components/NavHeader.vue'
import NavFooter from '@/components/NavFooter.vue'
import NavBread from '@/components/NavBread.vue'
代码语言:javascript
复制
components: {
    NavHeader,
    NavFooter,
    NavBread
}

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

组件引入后在要在父组件中用标签的形式写入子组件,写入的方式(在templat中要将组件的名称改为小写,两个单词直接加“-”):

代码语言:javascript
复制
<nav-header></nav-header>
<nav-footer></nav-footer>

如果你直接写入标签,没有引入的话,会报错

代码语言:javascript
复制
vue.js:564 [Vue warn]: Unknown custom element: <nav-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in <Detail> at D:\xxx\xxx.vue)

slot插槽

怎么给大家解释一下slot插槽了?

将父组件的内容放到子组件指定的位置叫做内容分发,这就是slot插槽的作用,就是父组件引用子组件的同时,把父组件的内容放到子组件里面去。感觉有点绕,大家看代码 比如我在子组件NavHeader中定义了一个slot标签,如下:

代码语言:javascript
复制
<div class="content">
    <slot></slot>  //子组件NavBread
</div>

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

代码语言:javascript
复制
<nav-bread>
  <span slot="bread">web秀</span>
</nav-bread>

这时候编译的代码就是这样的

代码语言:javascript
复制
<div class="content">
  <span>web秀</span>
</div>

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

代码语言:javascript
复制
<slot name="bread"></slot>  //name值为bread
<slot name="test"></slot>
代码语言:javascript
复制
<nav-bread>
    <span slot="bread">web秀</span> //slot值为bread
    <span slot="test">Javan</span>
</nav-bread>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年11月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 怎么用
  • slot插槽
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档