vue组件-使用插槽分发内容(slot)

slot--使用插槽分发内容（位置、槽口；作用: 占个位置）官网API：https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容使用组件时，有...

普通网友

80人浏览 · 2019-10-15 08:37:02

普通网友 · 2019-10-15 08:37:02 发布

slot--使用插槽分发内容（位置、槽口；作用: 占个位置）

官网API： https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容

使用组件时，有时子组件不知道会收到什么内容，这是由父组件决定的。

一、单个插槽

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

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

3.渲染结果：
<div>
    <h1>我是父组件的标题</h1>
    <div>
        <h2>我是子组件的标题</h2>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
    </div>
</div>

二、具名插槽

slot根据不同的name名称分发内容，多个插槽可以有不同的名字。

仍然可以有匿名的默认插槽，为了找不到匹配的内容片段使用，如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

1.my-component 组件:
<div class="container">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>

2.父组件：

<my-component>
    <h1 slot="header">这里可能是一个页面标题</h1>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
    <p slot="footer">这里有一些联系信息</p>
</my-component>

3.渲染结果：
<div class="container">
    <header>
        <h1>这里可能是一个页面标题</h1>
    </header>
    <main>
        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>
    </main>
    <footer>
        <p>这里有一些联系信息</p>
    </footer>
</div>

三、作用域插槽

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

1.子组件:
<div class="child">
    <slot text="hello from child"></slot>
</div>

2.父组件：

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

3.渲染结果：
<div class="parent">
    <div class="child">
        <span>hello from parent</span>
        <span>hello from child</span>
    </div>
</div>

更多专业前端知识，请上【猿2048】www.mk2048.com

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^