Vue学习教程之插槽

前言

我们在写页面的时候可能会遇到如下需求：

我们定义一个vue子组件，在子组件中我们需要插入一些 html 代码。这个问题我们先一步步解决。

<div id="app">
    <child2 content1="<p>我是子组件的 p</p>"></child2>
</div>

var componentSlot2 = {
    props: ['content1'],
    template:<div class="content" v-html="content1">你好呀</div>,              
};

var app = new Vue({
    el: '#app',
    data: {

    },
    components: {
        'child': componentSlot,
        'child1': componentSlot1,
        // 不用插槽
        'child2': componentSlot2,
    }
});

我们定义了一个组件后，在 template 中定义更改为：

template: '<div class="content"><p>我是子组件的 p</p>你好呀</div>'

这种方式是可以，但是对于代码的维护来说是极差的。我们并不 知道 content 中的内容有多少，如果有 10 个或者更多，那么我们的代码块将变得冗余而且不易阅读。

于是我们采用另一种方式：将 html 作为值从父组件传入子组件中，

template:<div class="content" v-html="content1"><h2>你好呀</h2></div>,

如上，这种方式也可以但是在解析时出现一个问题是：h2 没有渲染；还有就是如果标签对了也会出现上面得问题：代码冗余而且不易阅读。因此就出现了插槽

插槽一般用法：

用插槽改写上面的代码

<div id="app">
    <child>
        <p>我是子组件的 p</p>
    </child>
</div>
// 定义一个组件
componentSlot = {
     template:<div class="content"><slot></slot>你好呀</div>,
};

这次可以直接将要在子组件中显示的 html 直接添加到定义子组件下。这里我只添加了一个，其实将<p>我是子组件的</p>变换为许多标签都可以

具名插槽

用具名插槽改写上面代码

<div id="app">
    <child>
        <div class="header" slot="header">header</div>
        <p>我是子组件的 p</p>
        <div class="footer" slot="footer">footer</div>
    </child>
</div>
// 定义一个组件
var componentSlot1 = {
    template: '<div><slot name="header"></slot>' +
    '<div class="content">具名插槽</div>'+
    '<slot name="footer"></slot></div>',

};

关键地方：html 中定义 slot=”名称” ； js template 中定义 name=”名称” 相对应的。

我理解的就相当于 html 起一个名称，在js查找到 html 中的名称相同的并以槽的形式展示。感觉和<script type="text"><script>这种有点类似。

好了，今天就是这个吧。写得比较随意，不喜勿喷。