vue如何使用 Slot 分发内容实例详解


Posted in Javascript onSeptember 05, 2017

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如何使用 Slot 分发内容实例详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
浅析javascript 定时器
Dec 23 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
JS回调函数深入理解
Oct 16 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
详解Vue2.0 事件派发与接收
Sep 05 #Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 #Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 #Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 #Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 #Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 #Javascript
You might like
php数据库连接
2006/10/09 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python @property原理解析和用法实例
2020/02/11 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
党务公开方案
2014/05/06 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2015年公司工作总结
2015/04/25 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js