vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】


Posted in Javascript onMarch 06, 2020

本文实例讲述了vue 使用插槽分发内容操作。分享给大家供大家参考,具体如下:

单个插槽

除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 单个插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
 
<div id="example">
  <div>
 <h1>我是父组件的标题</h1>
 <my-component>
  <p>这是一些初始内容</p>
  <p>这是更多的初始内容</p>
 </my-component>
</div>
</div>
 
 
var childNode = {
  //当没有<slot>时,父组件的其他内容不会显示,当有<slot>时,要是父组件中的内容不为空,<slot>
  //中的内容就不会显示
 template: `
 <div>
 <h2>我是子组件的标题</h2>
 <slot>
  只有在没有要分发的内容时才会显示。
 </slot>
</div>
 `,
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'my-component': childNode
 }
})
</script>
</body>
</html>

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

具名插槽

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 具名插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
 
<div id="example">
 <app-layout>
 <h1 slot="header">这里可能是一个页面标题</h1>
 
 <p>主要内容的一个段落。</p>
 <p>另一个主要段落。</p>
 
 <p slot="footer">这里有一些联系信息</p>
</app-layout>
</div>
 <script>
 Vue.component('app-layout',{
 template:'<div class="container">'+
 '<header>'+
  '<slot name="header"></slot>'+
 '</header>'+
 '<main>'+
  '<slot></slot>'+
 '</main>'+
 '<footer>'+
  '<slot name="footer"></slot>'+
 '</footer>'+
'</div>'
 })
 
// 创建根实例
new Vue({
 el: '#example',
 
})
</script>
</body>
</html>

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

作用域插槽

作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:

<div class="child">
 <slot text="hello from child"></slot>
</div>

在父级中,具有特殊特性 slot-scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象:

在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 作用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
 
<div id="example">
   <parent-com></parent-com>
</div>
  <script>
  Vue.component('child-com',{
    template:'' +
    '<ul>' +
    '  <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' +
    '</ul>',
    data:function(){
      return {
        animal:[
          {name:'大象'},
          {name:'小狗'},
          {name:'小猫'},
          {name:'老虎'}
        ]
      }
    }
  });
  //父组件
  // 在父组件的模板里,使用一个Vue自带的特殊组件<template> ,
  // 并在该组件上使用scope属性,值是一个临时的变量,存着的是由子组件传过来的
  // prop对象,在下面的例子中我把他命名为props。
  // 获得由子传过来的prop对象。这时候,父组件就可以访问子组件在自定义属性上暴露的数据了。
  Vue.component('parent-com',{
    template:'' +
    '<div class="container">' +
    '<p>动物列表</p>' +
    '<child-com>' +
    '  <template scope="props" slot="child-ul">' +
    '    <li class="child-ul">{{ props.text }}</li>' +
    '  </template>' +
    '</child-com>' +
    '</div>'
  });
 
// 创建根实例
new Vue({
 el: '#example',
 
})
</script>
</body>
</html>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
vue-router 路由传参用法实例分析
Mar 06 #Javascript
JavaScript前端实现压缩图片功能
Mar 06 #Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 #Javascript
vue2路由基本用法实例分析
Mar 06 #Javascript
vue 动态组件用法示例小结
Mar 06 #Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 #Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php在线打包程序源码
2008/07/27 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php微信开发之关注事件
2018/06/14 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python测试线程应用程序过程解析
2019/12/31 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
无工作经验者个人求职信范文
2013/12/22 职场文书
初中教师业务学习材料
2014/05/12 职场文书
活动宣传策划方案
2014/05/23 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
公司管理建议书
2015/09/14 职场文书