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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JS重要知识点小结
Nov 06 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
Javascript Promise用法详解
May 10 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
深入了解js原型模式
May 30 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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
我的群发邮件程序
2006/10/09 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
激活 ActiveX 控件
2006/10/09 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python操作MySQL模拟银行转账
2018/03/12 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
一道Delphi上机题
2012/06/04 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
检讨书范文大全
2015/05/07 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
小爸爸观后感
2015/06/15 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL