详解vue slot插槽的使用方法


Posted in Javascript onJune 13, 2017

官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观

<!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就比较强大了,我们知道子组件的数据,在父组件中是无法使用的,但是通过官方提供的扩展,可以轻松实现这一点。

渲染后效果图,可以直接自己在浏览器运行查看效果

详解vue slot插槽的使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
javascript实现下雨效果
Mar 27 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
ES6基础之默认参数值
Feb 21 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 #Javascript
You might like
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php实现文件下载实例分享
2014/06/02 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python单例模式的两种实现方法
2017/08/14 Python
python基于http下载视频或音频
2018/06/20 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python 实现绘制整齐的表格
2019/11/18 Python
pycharm修改file type方式
2019/11/19 Python
Django多数据库联用实现方法解析
2020/11/12 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
2015元旦节寄语
2014/12/08 职场文书