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 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
Angular工具方法学习
Dec 26 Javascript
ionic3 懒加载
Aug 16 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
linux下 C语言对 php 扩展
2008/12/14 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python实现多属性排序的方法
2018/12/05 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
协议书的格式
2014/04/23 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
入党转正介绍人意见
2015/06/03 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers
Python开发五子棋小游戏
2022/05/02 Python