Vue中的slot使用插槽分发内容的方法


Posted in Javascript onMarch 01, 2018

本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9

<slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来。

也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件。那么如何实现呢?

单个插槽:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </div>
    <script type="text/javascript">
      Vue.component('my-component', {
       // 有效,因为是在正确的作用域内
       template: '<div>\
              <h2>我是子组件的标题</h2>\
              <slot>只有在没有要分发的内容时才会显示。</slot>\
            </div>',
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })

    </script>
  </body>
</html>

组件中的模板中写入slot标签,在父级调用子组件的时候传入html即可。

具名插槽:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component>
         <h1 slot="header">这里可能是一个页面标题</h1>

         <p>主要内容的一个段落。</p>
         <p>另一个主要段落。</p>

         <p slot="footer">这里有一些联系信息</p>
      </my-component>
    </div>
    <script type="text/javascript">
      Vue.component('my-component', {
       // 有效,因为是在正确的作用域内
       template: '<div class="container">\
             <header>\
              <slot name="header"></slot>\
             </header>\
              <main>\
              <slot></slot>\
             </main>\
             <footer>\
              <slot name="footer"></slot>\
             </footer>\
            </div>',
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })

    </script>
  </body>
</html>

具名插槽,顾名思义当有多个slot标签时,你需要给他们起个自己的名字,在父组件调用时需要slot="内部的对应名字",当存在没有命名的slot标签时,父级组件传入的默认html代码将全部输出在无名的slot标签中。

作用域插槽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
       <!-- 在父级中,具有特殊特性 slot-scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象: -->
       <child>
        <template scope="props">
         <span>hello from parent</span><br>
         <span>{{ props.text }}</span>
        </template>
      </child>
    </div>
    <script type="text/javascript">
      // 在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:
      Vue.component('child',{
        template:'<ul>' +
              '<slot text="hello from child"></slot>' +
             '</ul>',
        data:function(){
         return {

         }
        },
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })

    </script>
  </body>
</html>

作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

其实就是相当于,在父组件中可以获取到子组件传递出来的props对象,从而渲染到父组件上。

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

Javascript 相关文章推荐
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
在vue中封装可复用的组件方法
Mar 01 #Javascript
JavaScript判断日期时间差的实例代码
Mar 01 #Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 #Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 #Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 #Javascript
vue 虚拟dom的patch源码分析
Mar 01 #Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
示例详解Laravel的注册重构
2016/08/14 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JS中的三个循环小结
2017/06/20 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
J2EE系统只能是基于web
2015/09/08 面试题
烹调加工管理制度
2014/02/04 职场文书
班长自荐书范文
2014/02/11 职场文书
申论倡议书范文
2014/05/13 职场文书
小学清明节活动总结
2014/07/04 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
《迟到》教学反思
2016/02/24 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书