vue.js-使用插槽分发内容的三个示例

Posted 2020-10-10

　　自己这段时间在自学vue.js，发现关于插槽这方面，官方文档中，没有详细的讲解使用方法与示例，我自己试着来总结了一下。然后根据官方文档写了几个使用插槽的例子。每个例子都要引入vue.js。示例中上面为html代码，下面为javascript代码。

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

一、单个插槽：

1 <div id="exp1">
2     <my-com></my-com>
3 </div>

 1 <script type="text/javascript">
 2     //单个插槽
 3     //子组件，备用内容在子组件的作用域内编译，并且只有在宿主元素为空时，且没有要插入的内容时才显示备用内容
 4     Vue.component(‘child-com‘,{
 5         template:‘<div><h2>我是子组件的标题</h2>‘ +
 6         ‘<slot>只有在没有要分发的内容时才会显示</slot>‘ +
 7         ‘</div>‘
 8     });
 9     //父组件
10     Vue.component(‘my-com‘,{
11         template:‘<div><h1>我是父组件的标题</h1>‘ +
12         ‘<child-com>‘ +
13         ‘<p>这是一些初始内容</p>‘ +
14         ‘<p>这是另外一些初始内容</p>‘ +
15         ‘</child-com>‘ +
16         ‘</div>‘
17     });
18     var exp1 = new Vue({
19         el:‘#exp1‘
20     })
21 </script>

 

二、具名插槽：

<div id="exp1">
    <parent-com></parent-com>
</div>

 1 <script type="text/javascript">
 2     //子组件
 3     Vue.component(‘app-layout‘,{
 4         template:‘‘ +
 5         ‘<div class="container">‘ +
 6         ‘   <header>‘ +
 7         ‘       <slot name="header"></slot>‘ +
 8         ‘   </header>‘ +
 9         ‘   <main>‘ +
10         ‘       <slot></slot>‘ +
11         ‘   </main>‘ +
12         ‘   <footer>‘ +
13         ‘       <slot name="footer"></slot>‘ +
14         ‘   </footer>‘ +
15         ‘</div>‘
16     });
17     //父组件
18     Vue.component(‘parent-com‘,{
19         template:‘‘ +
20         ‘<app-layout>‘ +
21         ‘   <h1 slot="header">这是一个页面的标题</h1>‘ +
22         ‘   <p>主要内容的一个段落</p>‘ +
23         ‘   <p>主要内容的另外一个段落</p>‘ +
24         ‘   <p slot="footer">这是一些页脚信息</p>‘ +
25         ‘</app-layout>‘
26     });
27     var exp1 = new Vue({
28         el:‘#exp1‘
29     })
30 </script>

三、作用域插槽：

<div id="exp1">
    <parent-com></parent-com>
</div>

 1 <script type="text/javascript">
 2     //子组件
 3     //代表性的列表组件模块
 4     Vue.component(‘child-com‘,{
 5         template:‘‘ +
 6         ‘<ul>‘ +
 7         ‘   <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>‘ +
 8         ‘</ul>‘,
 9         data:function(){
10             return {
11                 animal:[
12                     {name:‘大象‘},
13                     {name:‘小狗‘},
14                     {name:‘小猫‘},
15                     {name:‘老虎‘}
16                 ]
17             }
18         }
19     });
20     //父组件
21     // 在父组件的模板里，使用一个Vue自带的特殊组件<template> ，
22     // 并在该组件上使用scope属性，值是一个临时的变量，存着的是由子组件传过来的
23     // prop对象，在下面的例子中我把他命名为props。
24     //  获得由子传过来的prop对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。
25     Vue.component(‘parent-com‘,{
26         template:‘‘ +
27         ‘<div class="container">‘ +
28         ‘<p>动物列表</p>‘ +
29         ‘<child-com>‘ +
30         ‘   <template scope="props" slot="child-ul">‘ +
31         ‘       <li class="child-ul">{{ props.text }}</li>‘ +
32         ‘   </template>‘ +
33         ‘</child-com>‘ +
34         ‘</div>‘
35     });
36     //这个<div class="container"></div>是必须的，不然会发生编译错误
37     var exp1 = new Vue({
38         el:‘#exp1‘
39     })
40 </script>

 

这是我在学习官方文档，然后在网络上查找信息后，做的一些总结，欢迎指正。