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(二) 事件机制(1)
Nov 25 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
详解iframe与frame的区别
Jan 13 Javascript
php基于redis处理session的方法
Mar 14 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
Vue中computed及watch区别实例解析
Aug 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
ftp类(example.php)
2006/10/09 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
详解php中 === 的使用
2016/10/24 PHP
window.open的功能全解析
2006/10/10 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python中subprocess的简单使用示例
2015/07/28 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
django框架auth模块用法实例详解
2019/12/10 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
小学秋季运动会报道稿
2014/09/30 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers