槽口的作用 :
在组件里插入内容,用来混合父组件的内容与子组件自己的模板
普通槽口:
<slot></slot>,1个组件只有1个
具名槽口:
带name属性的槽口<slot name='slotA'></slot>1个组件可以有多个,具名槽口将绑定slot属性等于其name的标签
槽口的显示
槽口的显示是按照其组件顺序来显示的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="div">
<test>
<span slot='slotc'>槽口C</span>
<span slot='slotb'>槽口B</span>
槽口A
</test>
</div>
<template id="tmp">
<div>
<h2>test</h2>
<slot name='slotb'></slot>
<slot></slot>
<slot name='slotc'></slot>
</div>
</template>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#div',
components: {
'test': {
template: '#tmp'
}
}
});
</script>
4009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
