详解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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
js面向对象的写法
Feb 19 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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从字符串创建函数的方法
2015/03/16 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
原生js生成图片验证码
2020/10/11 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
使用Scrapy爬取动态数据
2018/10/21 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
用python进行视频剪辑
2020/11/02 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
党建目标管理责任书
2014/07/25 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
法人委托书范本格式
2014/09/15 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
父母教会我观后感
2015/06/17 职场文书
60句有关成长的名言
2019/09/04 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书