vue - slot

80 阅读 0 评论 53 点赞

我是靠谱客的博主重要香水，最近开发中收集的这篇文章主要介绍vue - slot，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

slot：父组件中的内容代替了子组件中的 slot 标签，使得我们可以在
不同地方使用子组件的结构而且填充不同的父组件内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>slot</title>
</head>
<body>
    <div id="app">
            <my-slot>
                <p slot="title">{{ title }}</p>
                <div slot="content">{{ content }}</div>
            </my-slot>
    </div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script> 
<script>
    Vue.component('my-slot', {
　template : '<div>
　　<div class="title"> 
　　　<slot name="title"></slot> 
　　</div> 
　　<div class="content"> 
        <slot name="content"></slot> 
　　</div> 
　</div>',
});
    var vm = new Vue({
        el:"#app",
        data:{
            title:"I am title",
            content:"I am content"
        },
    }) 
</script>  
</body>
</html>

最终渲染结果是：

<div>
　<div class="title">
　　<p slot="title">This is a title</p>
　</div>
　<div class="content">
　　<div slot="content">This is the content</div>
　</div>
</div>