详解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 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python实现一个简单的验证码程序
2017/11/03 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
会计专业推荐信
2013/10/29 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书