详解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代码(站点及虚拟目录)
Oct 20 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
js实现数字跳动到指定数字
Aug 25 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
一个数据采集类
2007/02/14 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Python单例模式实例详解
2017/03/01 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python右对齐的实例方法
2020/07/05 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
自我评价格式
2014/01/06 职场文书
年度考核评语
2014/01/19 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
检讨书格式
2015/05/07 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技