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>这种有点类似。
好了，今天就是这个吧。写得比较随意，不喜勿喷。
文档来源：51CTO技术博客https://blog.51cto.com/heboyme/2998319
页:
[1]