vue2.0 之 slot 内容分发

前提：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。被分发的内容会在父作用域内编译。

一、单个插槽

// 子组件模板 child-component

<div>

  <h2>我是子组件的标题</h2>

  <slot>

    只有在没有要分发的内容时才会显示。

  </slot>

</div>

// 父组件模板：

// 父组件模板中的子组件child-component中的内容渲染到slot插槽中，

// 若插槽中原有默认内容，会替换掉；
// 若子组件child-component只有一个没有属性的插槽，则父组件中的所有传入内容将被渲染在此插槽处；
// 若一个插槽都没有，则父组件模版中的子组件child-component中的内容会被丢弃

<div>

  <h1>我是父组件的标题</h1>

  <child-component>

    <p>这是一些初始内容</p>

    <p>这是更多的初始内容</p>

  </child-component>

</div>

// 渲染结果：

<div>

  <h1>我是父组件的标题</h1>

  <div>

    <h2>我是子组件的标题</h2>

    <p>这是一些初始内容</p>

    <p>这是更多的初始内容</p>

  </div>

</div>

二、具名插槽

<slot> 元素用属性 name 来进一步配置如何分发内容。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽，作为默认插槽，作为找不到匹配的内容片段的备用插槽。若无默认插槽，这些找不到匹配的内容片段将被抛弃

// 子组件模板：child-component

<div class="container">

  <header>

    <slot name="header"></slot>

  </header>

  <main>

    <slot></slot> //默认插槽

  </main>

  <footer>

    <slot name="footer"></slot>

  </footer>

</div>

// 父组件模板：

<div>

   <h2>父组件模版标题</h2>

   <child-component>

       <h1 slot="header">这里可能是一个页面标题</h1>

　　　　// 为匹配到的内容，插入到默认插槽中

       <p>主要内容的一个段落。</p>

       <p>另一个主要段落。</p>

       <p slot="footer">这里有一些联系信息</p>

   </child-component>

</div>

// 渲染结果为：

<div>

   <h2>父组件模版标题</h2>

  <div class="container">

     <header>

         <h1>这里可能是一个页面标题</h1>

     </header>

     <main>

        <p>主要内容的一个段落。</p>

        <p>另一个主要段落。</p>

     </main>

     <footer>

         <p>这里有一些联系信息</p>

     </footer>

  </div>

</div>

三、作用域插槽

v2.1.0

作用域插槽是一种特殊类型的插槽，能被传递数据。在子组件中，只需将数据传递到插槽，就可以像 props 一样传递数据。

// 子组件模板 child-component

<div class="child">

  <slot text="msg from child"></slot>

</div>

在父级中，具有属性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：

// 父组件模板

<div class="parent">

  <child-component>

    <template slot-scope="props">

      <span>msg from parent</span>

      <span>{{ props.text }}</span>

    </template>

  </child-component>

</div>

// 渲染成：

<div class="parent">

  <div class="child">

    <span>msg from parent</span>

    <span>msg from child</span>

  </div>

</div>

在组件开发中，Element-UI广泛使用

demo:

// 父组件模版
......其他模版代码

<list :data="listData" class="img-list">

        <template scope="scope">

            <div class="info">

                <p>数据：{{scope}}</p>

                <p>索引：{{scope.$index}}</p>

                <p>姓名：{{scope.row.name}}</p>

                <p>性别：{{scope.row.sex}}</p>

            </div>

        </template>

</list>
........其他模版代码

// 子组件模版 list

<ul>

     <li v-for="(item,i) in data">

           <slot :row="item" :$index="i"></slot>

     </li>

</ul>

js:
......
props: {
  data: {
　　default: [],
　　type: Array
  }
}
.....

父模版渲染后：

<ul>

    <li v-for="(item,i) in data">

       <div class="info">

            <p>数据：{{item}}</p>

            <p>索引：{{item.i}}</p>

            <p>姓名：{{item.name}}</p>

            <p>性别：{{item.sex}}</p>

        </div>

    </li>

</ul>

父组件把数据listData传递给子组件 data , 子组件通过作用域插槽把值传递给父组件scope

注意：<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }

v2.5.0+

slot-scope 能被用在任意元素或组件中而不再局限于 <template>

 // 子组件模版 my-list

<ul>

  <slot name="item-child"

    v-for="item in items"

    :text="item.text">

    <!-- 这里写入备用内容 -->

  </slot>

</ul>

// 父组件模版
<my-list :items="items">

  <li

    slot="item-child"

    slot-scope="props"

    class="my-fancy-item">

    {{ props.text }}

  </li>

</my-list>

巴特西

vue2.0 之 slot 内容分发

最新文章

热门文章