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 相关文章推荐
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
在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
PHP自动生成月历代码
2006/10/09 PHP
第六节--访问属性和方法
2006/11/16 PHP
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
解决Python使用列表副本的问题
2019/12/19 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
应届毕业生个人求职信范文
2014/01/29 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
会计演讲稿范文
2014/05/23 职场文书
关于旅游的活动方案
2014/08/15 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python