官方教程: https://cn.vuejs.org/v2/guide/
vue solt 插槽使用
如果现在事先模板中不知道需要什么内容,需要在使用时传递 就可以使用插槽
with来实现,这种效果! 类似ThinkPHP中的模板继承 的block标签的功能
匿名插槽
顾名思义就是没有名字的插槽, 匿名插槽只能有一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue study</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-comp>
<slot> <p> 这是使用了插槽,如果没有插槽,这里的内容不会显示 </p> </slot>
</my-comp>
</div>
<!--templates-->
<template id="my">
<div>
<p>其他内容</p>
<slot> <span>匿名插槽 -- 默认内容</span> </slot>
<p>其他内容</p>
</div>
</template>
<!-- JavaScript -->
<script>
// Register Vue Component
let myComp = Vue.extend({
template: '#my',
});
const vm = new Vue({
el: '#app',
data: {
},
components: {
"my-comp": myComp,
},
});
</script>
</body>
</html>
复制代码实名插槽
实名插槽可以有多个,在使用时必须使用name属性来标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue study</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
注意: 这里放的内容都是属于父级的, 所以 @click="fn" 这个fn方
法加在组件中是没有用的,必须加在 vm 这个实例中
-->
<my-comp>
<div slot="content">
这是在使用时传入的内容...
<a href="" @click="fn"></a>
</div>
</my-comp>
</div>
<!--templates-->
<template id="my">
<div>
<slot name="title">default title</slot>
<slot name="content">default content</slot>
</div>
</template>
<!-- JavaScript -->
<script>
// Register Vue Component
let myComp = Vue.extend({
template: '#my',
});
const vm = new Vue({
el: '#app',
data: {
},
methods: {
fn () {
alert("hello");
}
},
components: {
"my-comp": myComp,
},
});
</script>
</body>
</html>
复制代码插槽可以设置默认值,定义了不使用就会使用默认值, 如果没有名字的标签的标签默认会放到default(即匿名插槽)