vue框架——插槽slot

Posted chll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue框架——插槽slot相关的知识,希望对你有一定的参考价值。

slot:插槽相当于一个统一资源占位符,对使用的模板在插槽中写入自己想要的数据
<slot name = "aaa"></slot>//name对插槽进行命名为aaa
<template slot = "aaa">//调用组件或者自己编写的组件并绑定名字为aaa的插槽,来实现对插槽的替换与动态变化
</template>
<div id = "app">
<!--<p>测试列表</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>-->
<!--<ul v-for="item in items" v-block>
<li>{{item}}</li>
</ul>-->
<test>
<test-title slot = "test-title" v-bind:title = "title"></test-title>
<test-items slot = "test-items" v-for = "item in items" v-bind:item = "item"></test-items>
</test>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

Vue.component("test",{
template:
‘<div>‘ +
‘<slot name="test-title"></slot>‘ +
‘<ul>‘ +
‘<slot name="test-items"></slot>‘ +
‘</ul>‘ +
‘</div>‘
});
Vue.component("test-title",{
props:[‘title‘],//需要使用v-bind来绑定并且将值传入并用props接受,否则是找不到滴
template: ‘<div>{{title}}</div>‘
});
Vue.component("test-items",{
props: [‘item‘],
template: ‘<li>{{item}}</li>‘
});
var vm = new Vue({
el:"#app",
data:{
title:"陈鸿柳",
items:[‘A‘,‘B‘,‘C‘]
}
});
</script>

以上是关于vue框架——插槽slot的主要内容,如果未能解决你的问题,请参考以下文章

vue插槽slot理解

vue_cli知识点个人总结--链接

VUE_渐进式JS框架目录

Vue组件系统 񠒁

react-插槽(Portals)

Vue组件系统 -- 2019-08-08 18:01:47