本文深入解析了Vue框架中插槽的概念及其应用，特别介绍了如何使用具名插槽来区分并定制自定义组件的内容显示，通过实例展示了具名插槽的基本语法和工作原理。
如下，插槽的话只有一个，代表此自定义控件里的所有内容，若是想将这些内容区分显示，可以使用具名插槽，也就是用name属性标识即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽与具名插槽</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<com>
<h2 slot="top">top</h2>
<h2 slot="bot">bot</h2>
</com>
</div>
<script>
Vue.component('com',{
template:`<div>
<slot name='top'>default top</slot>
<h1>center</h1>
<slot name='bot'> default bot</slot>
</div>`
});
var app = new Vue({
el:'#app2'
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
