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 XMLHttpRequest对象全面剖析
Apr 24 Javascript
chrome原生方法之数组
Nov 30 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
微信小程序实现图片上传
May 23 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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实现数组array转换成xml的方法
2016/07/19 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python中的各种装饰器详解
2015/04/11 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
详解python中的 is 操作符
2017/12/26 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python内存动态分配过程详解
2019/07/15 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
简单说说tomcat的配置
2013/05/28 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
办公室员工岗位工作职责
2014/03/10 职场文书
减负增效提质方案
2014/05/23 职场文书
校园安全标语
2014/06/07 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
Python 语言实现六大查找算法
2021/06/30 Python