一篇看懂vue.js内容分发

逻辑撷霓人
• 阅读 8236

vue.js内容分发把组件上下文的内容注入到组件。

定义解析

现在我们看一个架空的例子,帮助理解刚刚说过的严谨而难懂的定义。假设有一个组件名为my-component,其使用上下文如下:

  <my-component>
    <p>hi,slots</p>
  </my-component>  

再假设此组件的模板为:

  <div>
    <slot></slot>
  <div>

那么注入后的组件HTML相当于:

  <div>
     <p>hi,slots</p>
  <div>

标签<slot>会把组件使用上下文的内容注入到此标签所占据的位置上。组件分发的概念简单而强大,因为它意味着对一个隔离的组件除了通过属性、事件交互之外,还可以注入内容。

此案例变成可以执行的代码,就是这样的:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
  <my-component>
    <p>hi,slots</p>
  </my-component>  
</div>
<script>
   Vue.component('my-component', {
      template: `
      <div>
        <slot></slot>
      <div>
    `
    });


    new Vue({
      el: "#app"
  });
</script>

一个组件如果需要外部传入简单数据如数字、字符串等等的时候,可以使用property,如果需要传入js表达式或者对象时,可以使用事件,如果希望传入的是HTML标签,那么使用内容分发就再好不过了。所以,尽管内容分发这个概念看起来极为复杂,而实际上可以简化了解为把HTML标签传入组件的一种方法。所以归根结底,内容分发是一种为组件传递参数的方法。

命名插槽

刚刚的案例通过slot标签,一股脑的把组件上下文的内容全部注入到组件内的规定位置。vue.js也提供了命名插槽(named slot)的技术,可以把上下文内的内容分成多个有名字的部分,然后插入到组件的不同位置:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
  <my-component>
    <p slot='slot1'>hi,slot1</p>
    <p slot='slot2'>hi,slot2</p>
  </my-component>  
</div>
<script>
   Vue.component('my-component', {
      template: `
      <div>
        <slot name='slot1'></slot>
        <slot name='slot2'></slot>
      <div>
    `
    });

    new Vue({
      el: "#app"
  });
</script>

此案例使用了两个插槽分别为slot1,slot2,并且把它们放到组件的不同位置。

综合案例

现在我们看一个高级的案例,我来做一个即时贴(sticky)组件,用来显示一个有标题和主体的即时贴。组件会定义好即时贴的结构,外观,而具体的标题和内容,而使用内容分发技术传入的HTML标签:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
  <sticky>
    <div slot="title">
    <h3>Title</h3></div>
    <div slot="body"><p>
      Body foo bar baz  ddd
    </p></div>
  </sticky>
</div>
<script>
  Vue.component('sticky', {
    template: `
  <div>
    <div class="wrapper">  
      <div>
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="body">
            <slot name="body"></slot>
        </div>
      </div>
    </div>
  </div>`
});

new Vue({
    el: "#app"
});
</script>
<style>
.wrapper {
  display: flex;
  width: 180px;
  height: 150px;
  background: yellow;
  border-radius: 10px;
}

.title {
  border-bottom:1px solid red
}
.body {
  border-bottom:1px solid blue
}
</style>

本案例内,使用上下文通过属性slot创建了两个插槽,分别为title和body,在组件的模板内(template成员)通过<slot>标签的name属性引用title和body,并把它注入且放入到合适的位置上。

关于

作者:刘传君

创建过产品,创过业。好读书,求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...

点赞
收藏
评论区
推荐文章
Alex799 Alex799
4年前
Vue.js——60分钟快速入门
是当下很火的一个JavaScriptMVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
不才 不才
3年前
md-loader
mdloader组件文档是如何渲染出来文档用于描述系统功能,而组件文档描述组件的功能,对于前端组件为了直观体现一般会有一个预览模块,而一般组件文档都是采用markdown编写,而md是文本内容且并没有渲染组件代码的能力,那么这是如何做的呢?简单的说就是“自定义结构”,像elementui中对代码的描述为,中间的YOUCODE可以放简单的vue组件代码。这种
九路 九路
3年前
一文读懂Android View事件分发机制
AndroidView虽然不是四大组件,但其并不比四大组件的地位低。而View的核心知识点事件分发机制则是不少刚入门同学的拦路虎。ScrollView嵌套RecyclerView(或者ListView)的滑动冲突这种老大难的问题的理论基础就是事件分发机制。事件分发机制面试也会经常被提及,如果你能get到要领,并跟面试官深入的灵魂交流一下,那么一定会让
可莉 可莉
3年前
04. react 初次见面
    组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。1、组件定义的两种方式1.1函数定义组件  定义一个组件最简单的方式是使用JavaScript函数:functionWelcome(props){return<
小万哥 小万哥
1年前
RSS 解析:全球内容分发的利器及使用技巧
RSS(ReallySimpleSyndication)是一种XML格式,用于网站内容的聚合和分发,让用户能快速浏览和跟踪更新。RSS文档结构包括&lt;channel&gt;和&lt;item&gt;元素,允许内容创作者分享标题、链接和描述。通过RSS,用户可以定制新闻源,过滤不相关信息,提高效率。RSS支持不同版本,如RSS0.91和RSS2.0,其中RSS2.0语法简单且广泛使用。RSS提高网站流量,适用于新闻、博客、日历等频繁更新的站点。RSS的历史始于1997年,至今仍无官方标准,但已成为内容共享的重要工具。
融云IM即时通讯 融云IM即时通讯
6个月前
融云IM干货丨UNI-app适合个人开发者使用吗?
UNIapp非常适合个人开发者使用,原因如下:跨平台高效开发:UNIapp基于Vue.js,支持一次编写代码,多端发布,包括iOS、Android、H5及各大小程序平台,显著降低开发成本。组件丰富:提供大量内置组件和API,加速开发进程,同时支持自定义组件
taskbuilder taskbuilder
5个月前
TaskBuilder前端组件简介
3.3.3.1前端组件的分类前端页面是由众多组件层层嵌套构成的,这些组件是任讯信息自主研发的一套前端UI组件,称为tfp组件,这些组件根据其功能和特点又分为几大类,它们的继承关系如下图所示:从图中可知,所有组件都是从一个名为Component的根组件继承过