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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
js的回调函数详解
Jan 05 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JS实现躲避粒子小游戏
Jun 18 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php生成圆角图片的方法
2015/04/07 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Mac下安装vue
2018/04/11 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Django web框架使用url path name详解
2019/04/29 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python requests上传文件实现步骤
2020/09/15 Python
python+opencv实现车道线检测
2021/02/19 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
PHP数据运算类型都有哪些
2013/11/05 面试题
实习教师自我鉴定
2013/09/27 职场文书
工作态度检讨书
2014/02/11 职场文书
顶碗少年教学反思
2014/02/21 职场文书
知识竞赛主持词
2014/03/26 职场文书
干部鉴定材料
2014/05/18 职场文书
英语教师求职信范文
2015/03/20 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS