vue——使用插槽分发内容

男娘i 2021-09-14 12:56 294阅读 0赞

## 单个插槽 ##

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

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

例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 单个插槽</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
     
    <div id="example">
        <div>
      <h1>我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </div>
    </div>
     
     
    var childNode = {
        //当没有<slot>时，父组件的其他内容不会显示，当有<slot>时，要是父组件中的内容不为空，<slot>
        //中的内容就不会显示
     template: `
     <div>
      <h2>我是子组件的标题</h2>
      <slot>
        只有在没有要分发的内容时才会显示。
      </slot>
    </div>
     `,
    };
    // 创建根实例
    new Vue({
     el: '#example',
     components: {
      'my-component': childNode
     }
    })
    </script>
    </body>
    </html>

![20171227161824938][]

## 具名插槽 ##

`<slot>` 元素可以用一个特殊的特性 `name` 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 `slot` 特性的元素。

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 具名插槽</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    
    <div id="example">
    	<app-layout>
      <h1 slot="header">这里可能是一个页面标题</h1>
    
      <p>主要内容的一个段落。</p>
      <p>另一个主要段落。</p>
    
      <p slot="footer">这里有一些联系信息</p>
    </app-layout>
    </div>
    	<script>
     Vue.component('app-layout',{
    	template:'<div class="container">'+
      '<header>'+
        '<slot name="header"></slot>'+
      '</header>'+
      '<main>'+
        '<slot></slot>'+
      '</main>'+
      '<footer>'+
        '<slot name="footer"></slot>'+
      '</footer>'+
    '</div>'
    	})
    
    // 创建根实例
    new Vue({
     el: '#example',
     
    })
    </script>
    </body>
    </html>

![20171227165106910][]

## 作用域插槽 ##

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

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

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

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 作用域插槽</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
     
    <div id="example">
          <parent-com></parent-com>
    </div>
        <script>
       Vue.component('child-com',{
            template:'' +
            '<ul>' +
            '   <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' +
            '</ul>',
            data:function(){
                return {
                    animal:[
                        {name:'大象'},
                        {name:'小狗'},
                        {name:'小猫'},
                        {name:'老虎'}
                    ]
                }
            }
        });
        //父组件
        // 在父组件的模板里，使用一个Vue自带的特殊组件<template> ，
        // 并在该组件上使用scope属性，值是一个临时的变量，存着的是由子组件传过来的
        // prop对象，在下面的例子中我把他命名为props。
        //  获得由子传过来的prop对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。
        Vue.component('parent-com',{
            template:'' +
            '<div class="container">' +
            '<p>动物列表</p>' +
            '<child-com>' +
            '   <template scope="props" slot="child-ul">' +
            '       <li class="child-ul">{
         { props.text }}</li>' +
            '   </template>' +
            '</child-com>' +
            '</div>'
        });
     
    // 创建根实例
    new Vue({
     el: '#example',
     
    })
    </script>
    </body>
    </html>

[20171227161824938]: /images/20210813/c2d4052913884a42be6804fee82b4529.png
[20171227165106910]: /images/20210813/6355eae0eed64c3186da36f3905e5722.png