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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js-使用插槽分发内容的三个示例相关的知识,希望对你有一定的参考价值。

  自己这段时间在自学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>

 

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

以上是关于vue.js-使用插槽分发内容的三个示例的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 插槽

Vue--插槽slot

插槽分发内容

Vue学习笔记入门篇——组件的内容分发(slot)

Vue.js 插槽 - 如何在计算属性中检索插槽内容

VUE.js快速入门(vue本地应用⑥)