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 相关文章推荐
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
原生JS实现天气预报
Jun 16 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
详解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导出word格式数据的代码实例
2013/11/25 PHP
php面向对象值单例模式
2016/05/03 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Keras搭建自编码器操作
2020/07/03 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
商场消防管理制度
2014/01/12 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
团代会开幕词
2015/01/28 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android