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获取input表单值的代码
Apr 19 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
AngularJS Controller作用域
Jan 09 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 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
YII框架页面缓存操作示例
2019/04/29 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
移动节点的jquery代码
2014/01/13 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python决策树分类算法学习
2017/12/22 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Django csrf 验证问题的实现
2018/10/09 Python
python dlib人脸识别代码实例
2019/04/04 Python
pandas数据处理进阶详解
2019/10/11 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
出国留学自荐信
2013/10/25 职场文书
工程监理应届生求职信
2013/11/09 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
继承公证书样本
2014/04/04 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
财务负责人岗位职责
2015/02/03 职场文书
小浪底导游词
2015/02/12 职场文书
管理失职检讨书范文
2015/05/05 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python