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
Apr 15 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
Jquery $when done then的用法详解
May 20 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 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
基于php验证码函数的使用示例
2013/05/03 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
上课打牌的检讨书
2014/02/15 职场文书
公司新年寄语
2014/04/04 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
在校证明模板
2015/06/17 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android