vue学习笔记之slot插槽用法实例分析
更新时间：2020年02月29日 18:54:47 作者：Rachel~Liu
这篇文章主要介绍了vue学习笔记之slot插槽用法,结合实例形式对比分析了vue使用slot插槽的相关操作技巧与注意事项,需要的朋友可以参考下
本文实例讲述了vue slot插槽用法。分享给大家供大家参考，具体如下：
不使用插槽，在template中用v-html解析父组件传来的带有标签的content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child content="<p>Rachel</p>"></child>
</div>
</body>
</html>
<script>
Vue.component('child', {
props: ['content'],
template: '<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>'
})
var vm = new Vue({
el: '#app'
})
</script>
使用插槽，如果父组件为空，就会显示slot中定义的默认内容
<child>
<p>Rachel</p>
</child>
Vue.component('child', {
template: '<div>
<p>hello</p>
<slot>默认内容</slot>
</div>'
})
使用插槽添加header和footer，使用‘具名插槽'，也就是给插槽起个名字，各找各的位置。此处也可以写默认值，如果父组件没有对应的插槽内容的话，会显示子组件定义的插槽的默认值。
<div id="app">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
Vue.component('body-content', {
template: '<div>
<slot name="header">default header</slot>
<div class="content">content</div>
<slot name="footer">default footer</slot>
</div>'
})
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了vue-pdf插件实现pdf文档预览方式(自动分页预览)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue接入腾讯防水墙代码，代码超级简单，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
本文主要介绍了vue实现页面渲染时候执行某需求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
这篇文章主要介绍了vue.js实现图片压缩封装方法,包括全局main.js引入方法，通过引入imgupload方法结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue-router结合vuex实现用户权限控制功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
elementui使用el-upload组件实现自定义上传的详细步骤
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了关于ElementUI自定义Table支持render，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue项目开发常见问题和解决方案总结，帮助大家更好的利用vue开发，感兴趣的朋友可以了解下2020-09-09
AntV 组织图操作完毕以后，需要点击按钮将画布以图片的形式导出，这篇文章主要介绍了AntV结合Vue实现导出图片功能,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue消息提示this.$message方法使用,具有很好的参考价值,希望对大家有所帮助,2023-09-09
最新评论