专栏首页web秀vue组件-template和slot插槽详细介绍

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

前言

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

怎么用

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

import NavHeader from '../components/NavHeader.vue'
import NavFooter from '@/components/NavFooter.vue'
import NavBread from '@/components/NavBread.vue'
components: {
    NavHeader,
    NavFooter,
    NavBread
}

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

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

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

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

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标签,如下:

<div class="content">
    <slot></slot>  //子组件NavBread
</div>

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

<nav-bread>
  <span slot="bread">web秀</span>
</nav-bread>

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

<div class="content">
  <span>web秀</span>
</div>

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

<slot name="bread"></slot>  //name值为bread
<slot name="test"></slot>
<nav-bread>
    <span slot="bread">web秀</span> //slot值为bread
    <span slot="test">Javan</span>
</nav-bread>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 8种vue组件通信方式详细解析实例

    对于vue来说,组件是非常常见的,有很多平台都封装了了属于自己一套的组件,如element ui、we ui等等。同时组件之间的消息传递也是非常重要的,下面是我...

    Javanx
  • uni-app: 引导页功能如何实现?

    1、Uni-App 启动页和引导页介绍 2、Uni-App 简单引导页示例 3、Uni-App 视频引导页示例

    Javanx
  • 由微信小程序原生组件层级引发的“血案”

    今天就来谈谈微信小程序,原生组件层级导致的问题。 官方是这样说的:“原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原...

    Javanx
  • Vue中的slot、slot-scope和v-slot

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。值得注意的是:内容要写在父组件中,然后分给需要的子组件,当slo...

    刘亦枫
  • Vue基础:组件--slot、异步组件、递归组件及其他

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 <slot> 元素作为原始内容的插槽。

    奋飛
  • 使用namecheap证书进行配置htmls安全访问

    $ sudo vim /etc/apache2/sites-enabled/default-ssl.conf

    cn華少
  • 惊爆!小程序连发7种新能力,开直播、连Wi-Fi、分包加载……你们想要的都来了!

    昨晚沉寂已久的小程序又在深夜向我们发射了四大新能力 ? 1 升级实时音视频录制及播放能力 小程序拥有实时录制音、视频和播放音视频组件啦! 符合类目要求的小程序自...

    企鹅号小编
  • Hadoop学习笔记—11.MapReduce中的排序和分组

      从上图中可以清楚地看出,在Step1.4也就是第四步中,需要对不同分区中的数据进行排序和分组,默认情况下,是按照key进行排序和分组。

    Edison Zhou
  • 从门外汉到开发出TV应用,我只用了三天

    在这之前,本人一直从事Android手机应用层的开发。从没有接触过Android TV端的开发工作。当领导问能否在一周内做出一个TV端Demo时,自己心里还很是...

    吴延宝
  • 一文读懂因果推测、倾向模型(结合实例)

    数据派THU

扫码关注云+社区

领取腾讯云代金券