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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
简介JavaScript错误处理机制
Aug 04 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实现的功能是显示8条基色色带
2006/10/09 PHP
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
浅谈js中的this问题
2017/08/31 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
详解Python中的各种函数的使用
2015/05/24 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python difflib模块示例讲解
2017/09/13 Python
在python中bool函数的取值方法
2018/11/01 Python
谈谈Python中的while循环语句
2019/03/10 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
css3学习心得分享
2013/08/19 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
销售助理岗位职责
2014/02/21 职场文书
中层干部培训方案
2014/06/16 职场文书
医生辞职信范文
2015/03/02 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python