Vue学习系列 -- slot槽指派
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- slot槽指派相关的知识，希望对你有一定的参考价值。
我们在前面组件的学习章节中，只介绍到了父子组件之间的数据传递，其中对应子组件，只是简单的定义了一个标签。
既然子组件可以作为一个标签，那标签里面如果填充了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槽指派的主要内容，如果未能解决你的问题，请参考以下文章