2-7 vue 实名插槽

实名插槽

  • <strong>实名solt</strong>

    • 假设你的电脑主板上的各种插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的,所以假设有个组件是computer,其模板是:

      <template id="computer">
          <div>
            <slot name="CPU">这儿插你的CPU</slot>
            <slot name="GPU">这儿插你的显卡</slot>
            <slot name="Memory">这儿插你的内存</slot>
            <slot name="Hard-drive">这儿插你的硬盘</slot>
          </div>
      </template>
      
    • 那么,你想要配置一台电脑,就可以这么写:

          <computer>
            <div slot="CPU">Intel Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="Memory">Kingston 32G</div>
            <div slot="Hard-drive">Samsung SSD 1T</divt>
          </computer>
      
  • 具体代码如下:

<body>

<div id="app">
    <h2>当前电脑配置</h2>
    <!--注意:对应名字不要写错-->
    <my-computer>
        <div slot="cpu">Inter Core i7</div>
        <div slot="gpu">GTX1050Ti</div>
        <div slot="memory">Kingston 16G</div>
        <div slot="hard-drive">WD SSD 1T</div>
    </my-computer>
</div>

<!-- 自定义组件 -->
<template id="computer">
    <div>
        <slot name="cpu">这里插cpu</slot>
        <slot name="gpu">这里插gpu</slot>
        <slot name="memory">这里插内存</slot>
        <slot name="hard-drive">这里插硬盘</slot>
    </div>
</template>

</body>

<script src="js/vue.js"></script>
<script>
    //实例化组件
    Vue.component('my-computer', {
        template:'#computer'
    });

    new Vue({
        el:'#app'
    });

</script>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一些吧友总问我计算机硬件配置问题,一直想如何回答,偶然浏览LUMION吧,看到吧主为运行LUMION软件配置计算机...
    DIGITALMAN阅读 3,382评论 3 26
  • 店长经营本店4年多以来,总在不断地重复的说很多话,很多话.今天我准备把这些话都写出来.给大家科普一些知识,很可能你...
    mrrockwxd阅读 3,348评论 2 35
  • (两年前的文章)原作者没有署名,在此标明转载文章,源自QQ空间日志,侵删 1:主板故障 2:显卡故障 3:声卡故障...
    aclihui阅读 2,215评论 0 10
  • 电脑的毛病,种类繁多,奇葩问题不少,但丢开那些奇葩的,主要常见的归类起来也就这么三种: 一是完全不通电,二是通电无...
    年轻的薛良阅读 2,332评论 0 1
  • 在学习Linux前大家先要对计算机有相应了解,计算机系统,计算机硬件构成,操作系统,Linux相关介绍,获取Li...
    不知岁月惜阅读 717评论 0 2