vue如何使用 Slot 分发内容实例详解
更新时间：2017年09月05日 11:33:51 作者：Besmall
本篇文章主要介绍了vue如何使用 Slot 分发内容实例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue我自己还在摸索学习中，今天学习了使用 Slot 分发内容，给自己留个小笔记
使用slot分发内容我们要注意2点
<app> 组件不知道它会收到什么内容。这是由使用 <app> 的父组件决定的。
<app> 组件很可能有它自己的模板。
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-Slot 分发内容</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.sf{
margin: 10px;
width: 150px;
border: 1px solid #ccc;
}
.sf-header,.sf-bottom{
height: 30px;
background: sandybrown;
}
.sf-body{
min-height: 100px;
}
</style>
</head>
<body>
<div id="app">
<shoufa>
<h2 slot="title">学习vue</h2>
<p>Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合</p>
<h4 slot="bottom">vue很好学</h4>
</shoufa>
</div>
<script type="text/x-template" id="sfTpl">
<div class="sf">
<div class="sf-header"><slot name="title"></slot></div>
<div class="sf-body">
<slot></slot>
</div>
<div class="sf-bottom"><slot name="bottom"></slot>
</div>
</div>
</script>
<script>
var sf ={
template:"#sfTpl",
}
var app = new Vue({
el:"#app",
components:{
'shoufa':sf
}
})
</script>
</body>
</html>
结果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,本文给大家介绍了Vue3通过hooks方式封装节流和防抖,需要的朋友可以参考下2024-10-10
在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下2023-03-03
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,这篇文章主要给大家介绍了关于Vue导出Excel功能的相关资料,需要的朋友可以参考下2021-07-07
element-ui table使用type='selection'复选框全禁用(全选禁用)详解
element-ui中的table的多选很好用,但是如果其中某一项禁止选择,该怎样操作呢,下面这篇文章主要给大家介绍了关于element-ui table使用type='selection'复选框全禁用(全选禁用)的相关资料,需要的朋友可以参考下2023-01-01
Vue嵌套iframe时$router.go(-1)后退bug的原因解析
这篇文章主要介绍了Vue嵌套iframe,$router.go(-1)后退bug的问题原因及解决方法,本文给大家分享问题原因所在及解决方案,需要的朋友可以参考下吧2023-09-09
当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离，并可手动点击滚动tab标签，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在Vue.js项目中,使用ElementUI的el-upload组件可以轻松实现文件上传功能,通过配置组件参数和实现相应的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
vscode中prettier和eslint换行缩进冲突的问题
这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了使用vue-touch报priority错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论