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 相关文章推荐
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
手机端转换rem适应
Apr 01 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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 serialize()与unserialize()的用法
2013/06/05 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Pytorch之finetune使用详解
2020/01/18 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
计算机专业自荐信
2013/10/14 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
2014年服务员工作总结
2014/11/18 职场文书
食品质检员岗位职责
2015/04/08 职场文书
运动会新闻报道稿
2015/07/22 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python