提示:
VUE学习:vue基础16————插槽
VUE学习:vue基础16————插槽
前言
本文继续学习Vue相关内容。
提示:以下是本篇文章正文内容,下面案例可供参考# 表单元素的事件绑定问题
插槽
<body>
<div id="app">
<test>你好,世界</test>
</div>
</body>
<script>
// 全局组件
Vue.component('test', Vue.extend({
template: '<h2>全局组件</h2>'
}));
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components: {
}
});
</script>
如上代码所示:
**你好,世界**中的“你好,世界”不会显示。
解决此问题我们采用了插槽。
插槽标签slot的简单使用
插槽内可以包含任意内容或html标签
<body>
<div id="app">
<my-link>百度</my-link>
<my-link>知乎</my-link>
<!-- 插槽内可以包含任意内容或html标签-->
<my-link><b><i>小米</i></b></my-link>
<!-- slot标签内给定的内容为插槽的默认值-->
<my-link></my-link>
</div>
<template id="t1">
<div>
<a href="https://www.baidu.com">
<!-- 插槽内可以包含任意内容或html标签-->
<!-- slot标签内给定的内容为插槽的默认值-->
<slot>未知网站</slot>
你好,世界
</a>
</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components:{
'my-link':{
template:"#t1",
}
}
});
</script>
演示效果
插槽的高级使用
当模板中存在多个插槽时,可以给插槽设置name属性,加以区分
插槽name的默认值为default,并且在调用组件是,会自动优先向没有name的插槽中填充内容,如果存在多个没有设置name的插槽,或者name相同的插槽,则按照顺序从上至下填充最上面的插槽
<body>
<div id="app">
<layout>
<h3>我来组成头部</h3>
<h3>我来组成身体</h3>
<h3>我来组成尾部</h3>
</layout>
</div>
<template id="t2">
<div>
<header>
<slot></slot>
</header>
<div>
<slot> </slot>
</div>
<footer>
<slot></slot>
</footer>
</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components:{
layout:{
template: "#t2",
}
}
});
</script>
指定插槽位置需要template标签来完成,并设置name
<body>
<div id="app">
<layout>
<template v-slot:foot>
<h3>我来组成尾部</h3>
</template>
<template v-slot:head>
<h3>我来组成头部</h3>
</template>
<h3>我来组成身体</h3>
</layout>
</div>
<template id="t2">
<div>
<header>
<slot name="head"></slot>
</header>
<div>
<slot> </slot>
</div>
<footer>
<slot name="foot"></slot>
</footer>
</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components:{
layout:{
template: "#t2",
}
}
});
</script>
v-slot:的缩写为#
<body>
<div id="app">
<layout>
<template v-slot:foot>
<h3>我来组成尾部</h3>
</template>
<!--缩写为#-->
<template #head>
<h3>我来组成头部</h3>
</template>
<h3>我来组成身体</h3>
<h3>我来组成头部</h3>
<h3>我来组成身体</h3>
<h3>我来组成尾部</h3>
</layout>
</div>
<template id="t2">
<div>
<header>
<slot name="head"></slot>
</header>
<div>
<slot> </slot>
</div>
<footer>
<slot name="foot"></slot>
</footer>
</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components:{
layout:{
template: "#t2",
}
}
});
</script>