详解vue slot插槽的使用方法
时间:2019-03-30
本文章向大家介绍详解vue slot插槽的使用方法,主要包括详解vue slot插槽的使用方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> </head> <body> <div id="app"> <div> <!-- 单slot --> <v-one> <!-- 这里的所有内容会替换掉slot --> <p>初始化段落一</p> <p>初始化段落二</p> </v-one> <!-- 渲染结果 --> <!-- <div> <h1>组件标题</h1> <p>初始化段落一</p> <p>初始化段落二</p> <p>组件段落内容</p> <p>I am one</p> </div> --> <!-- 具名slot --> <v-two> <p slot="nav">我是导航</p> <p slot="main">我是内容</p> <p slot="footer">我是底部</p> </v-two> <!-- 渲染结果 --> <!-- <div> <nav> <p>我是导航</p> </nav> <main> <p>我是内容</p> </main> <footer> <p>我是底部</p> </footer> </div> --> <!-- 作用域插槽 --> <v-three> <!-- 父组件默认无法使用子组件数据 --> <template scope="props"> <p>{{props.text}}</p> </template> </v-three> <!-- 渲染结果 --> <!-- <div><p>I am three</p></div> --> </div> </div> <template id="one"> <div> <h1>组件标题</h1> <slot></slot> <p>组件段落内容</p> <p>{{one}}</p> </div> </template> <!-- 具名slot --> <template id="two"> <div> <nav> <slot name="nav"></slot> </nav> <main> <slot name="main"></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> <!-- 作用域插槽 --> <template id="three"> <div> <!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 --> <slot :text="three"></slot> </div> </template> <script> new Vue({ el: '#app', components: { 'v-one': { template: '#one', data() { return { 'one': 'I am one' } } }, 'v-two': { template: '#two', data() { return { 'two': 'I am two' } } }, 'v-three': { template: '#three', data() { return { 'three': 'I am three' } } } } }); </script> </body> </html>
单个slot使用最简单,也是最常用的,当我们定义了一个子组件,父组件在使用的这个组件的时候,想在内部自定义一些初始化数据,这时候就可以用slot实现。
具名slot只是给slot加了name属性,在使用的时候可以引入多个。
作用域slot就比较强大了,我们知道子组件的数据,在父组件中是无法使用的,但是通过官方提供的扩展,可以轻松实现这一点。
渲染后效果图,可以直接自己在浏览器运行查看效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Saltstack_使用指南09_远程执行-编写执行模块
- 如何安装FreeIPA
- 编译及使用hive-testbench生成Hive基准测试数据
- 树酱的前端知识体系构建(下)
- Babel配置傻傻看不懂?
- Saltstack_使用指南10_配置管理-状态模块
- Saltstack_使用指南11_配置管理-状态之间依赖关系 4.1. 部署架构4.2. Apache和PHP的SLS【正向依赖】4.3. mariadb 的 SLS
- 前端工程化之CICD那点破事
- Saltstack_使用指南12_配置管理-jinja模板 4.1. 部署架构4.2. 本章涉及的 pillar 的信息4.3. 配置文件 httpd.conf 修改
- Saltstack_使用指南13_runner的job和manage与execution的saltutil 5.1. master执行5.2. 查看当前活动的jobs
- Saltstack_使用指南14_无master 3.1. 常规信息3.2. grains设置3.3. pillar设置
- 在CDH7.1.1中安装NiFi
- 重学前端(三)-聊聊我们的浏览器的那些事
- Saltstack_使用指南15_多master 3.1. 创建冗余的master3.2. 拷贝主master的key和配置到冗余的master3.3. 启动冗余ma
- Saltstack_使用指南16_syndic 3.1. 部署salt-master3.2. 其他配置与部署4.1. 部署salt-syndic4.2. syndic