zoukankan      html  css  js  c++  java
  • 如何使用Vue中的slot

    之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来可能种花种菜,也有可能在这块地上建房子。然而slot可以以一当十,可以插入很多东西。不知明白否?

    由于项目经验有限,这篇我就先跟着官网的知识点走,当然会加入自己的部分项目代码。

    关于slot是这样说的,

    除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

    最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

    假定 my-component 组件有下面模板:

    <div>
    <h2>我是子组件的标题</h2>
    <slot>
    只有在没有要分发的内容时才会显示。
    </slot>
    </div>

    父组件模版:

    <div>
    <h1>我是父组件的标题</h1>
    <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
    </my-component>
    </div>

    渲染结果:

    <div>
    <h1>我是父组件的标题</h1>
    <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
    </div>
    </div>

    除了上述问题,还可以,给出名称,具名slot。

    难点在于作用域插槽的理解:

    上面这样讲到,

    作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。

    在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样

    <div class="child">
    <slot text="hello from child"></slot>
    </div>
    <div class="parent">
    <child>
    <template scope="props">
    <span>hello from parent</span>
    <span>{{ props.text }}</span>
    </template>
    </child>
    </div>
    <div class="parent">
    <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
    </div>
    </div>

    还有一个就是用于列表组件,允许组件自定义应该如何渲染列表每一项。

     

  • 相关阅读:
    FICO-错误日志集
    FICO-财务凭证验证及替代
    FICO-Payment Terms 收付款条件和分期付款设置
    ABAP-JCO服务端连接问题
    LES-整车企业物料拉动系统的设计和实现
    工程数学-微积分
    web前端(15)—— JavaScript的数据类型,语法规范2
    web前端(14)—— JavaScript的数据类型,语法规范1
    web前端(13)—— 了解JavaScript,JavaScript的引入方式
    web前端(12)—— 页面布局2
  • 原文地址:https://www.cnblogs.com/moxiaowohuwei/p/7997949.html
Copyright © 2011-2022 走看看