插槽
插槽就是子组件中的提供给父组件使用的一个占位符, 用
<slot></slot>
表示, 父组件可以在这个占位符中填充任何模板代码, 如HTML,组件等,填充的内容会替换子组件的<slot></slot>
标签;
<layout>hello world</layout>
template:`
<h1>
hello vue
<slot></slot>
</h1>
`
具名插槽,插入多个内容
v-slot:===> 缩写#
,只能在template
标签中使用;
eg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文章列表</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- <art-com>
<h1>study</h1>
</art-com> -->
<lay-out>
<template v-slot:header>
<h1>我是header内容</h1>
</template>
<template #main>
我是main内容
</template>
<template v-slot:footer>
我是footer内容
</template>
</lay-out>
</div>
</body>
</html>
<script type="text/javascript">
var art_com = {
template:`
<h1>hello vue <slot></slot></h1>
`,
}
var lay_out={
template:`
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot name='main'></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`,
}
var vm = new Vue({
el:'#app',
data:{
},
components:{
'lay-out':lay_out
}
});
</script>