Vue学习系列 -- slot槽指派

本文链接： https://blog.csdn.net/ydm19891101/article/details/90676861

我们在前面组件的学习章节中，只介绍到了父子组件之间的数据传递，其中对应子组件，只是简单的定义了一个标签。

既然子组件可以作为一个标签，那标签里面如果填充了html元素会怎么样呢？

比如下面的形式：

    <component-demo>
            <h1>{{title}}</h1>
            <div>{{content}}</div>
            <div>this is the footer</div>
        </component-demo>
    
    
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
            Vue.component('component-demo',{
                props:["template"],
                template: "<div>This is component demo</div>",
                data: function () {
                    return {
                       message : "component data function"
                    }
                },
                computed :{},
                methods :{}
            }
        );
        var app = new Vue({
            el : "#app1",
            data : {
                message : "component demo"
            }
        })

上面的代码在标签内定义了html元素，那么，最终效果展示的时候会是什么样呢？

效果是标签内定义的title content footer并不会展示。

那如果我们想要展示呢？这就需要用到我们今天用到的内容了：槽指派。

废话不多说，还是通过代码来学习。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Learning Vue.js</title>
</head>
 
<body>
<div id="app1">
<div>
    <component-demo>
        <h1 slot="title">{{title}}</h1>
        <div slot="content">{{content}}</div>
        <div>this is the footer</div>
    </component-demo>
</div>
</div>
</body>
 
<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var template = "<div>" + 
             "<p>" + 
               "<slot name='title'>title</slot>" +
             "</p>" +
             "<p>" + 
               "<slot name='content'>content</slot>" +
             "</p>" + 
             "<div slot='footer'>footer</div>" +        
           "</div>";
    var app = new Vue({
        el : "#app1",
        components : {
            "component-demo" : {
                template: template,
                data : function () {
                    return {
                    }
                }
            }
        },
        data : {
            title : "learn how to use slot" ,
            content : "this is slot content"
        }
    })
</script>
</html>

上面的代码有几个关键点：

子组件需要设置<slot>标签并指定name属性
字标签内的html设置元素时也需要指定slot属性的name并可以和字标签对应起来，只有这样才可以进行替换
如果未在字标签内指定slot元素，则子组件内的元素并不会被替换
对于子组件内未设置slot或者slot设置不匹配的元素，该元素不会展示

效果截图：

是不是很简单？

Vue学习系列 -- slot槽指派

猜你喜欢