登录  /  注册
首页 > web前端 > js教程 > 正文

Vue中slot插槽使用详解

php中世界最好的语言
发布: 2018-04-20 13:40:41
原创
3001人浏览过

这次给大家带来Vue中slot插槽使用详解,Vue中slot插槽使用的注意事项有哪些,下面就是实战案例,一起来看一下。

下面结合一个例子,简单说明slots的工作原理

dx-li子组件的template如下:

登录后复制
登录后复制
  •      你好!  
  • dx-ul父组件的template如下:
          hello juejin!  
    结合上述例子以及vue中相关源码进行分析 dx-ul父组件中template编译后,生成的组件render函数: module.exports={  render:function (){   var _vm=this;   var _h=_vm.$createElement;   var _c=_vm._self._c||_h;   // 其中_vm.v为createTextVNode创建文本VNode的函数   return _c('ul',      [_c('dx-li', [_vm._v("hello juejin!")])],     1)  },  staticRenderFns: [] }

    传递的插槽内容'hello juejin!'会被编译成dx-li子组件VNode节点的子节点。

    渲染dx-li子组件,其中子组件的render函数:

    module.exports={
     render:function (){
      var _vm=this;
      var _h=_vm.$createElement;
      var _c=_vm._self._c||_h;
      // 其中_vm._v 函数为renderSlot函数
      return _c('li', 
        {staticClass: "dx-li" }, 
        [_vm._t("default", [_vm._v("你好 掘金!")])], 
        2
       )
      },
     staticRenderFns: []
    }
    登录后复制

    初始化dx-li子组件vue实例过程中,会调用initRender函数:

    function initRender (vm) {
     ...
     // 其中_renderChildren数组,存储为 'hello juejin!'的VNode节点;renderContext一般为父组件Vue实例
     这里为dx-ul组件实例
     vm.$slots = resolveSlots(options._renderChildren, renderContext);
     ...
    }
    登录后复制

    其中resolveSlots函数为:

    /**
     * 主要作用是将children VNodes转化成一个slots对象.
     */
    export function resolveSlots (
     children: ?Array<vnode>,
     context: ?Component
    ): { [key: string]: Array<vnode> } {
     const slots = {}
     // 判断是否有children,即是否有插槽VNode
     if (!children) {
     return slots
     }
     // 遍历父组件节点的孩子节点
     for (let i = 0, l = children.length; i  
     * 编译成span的VNode节点data = {attrs:{slot: "abc"}, slot: "abc"},所以这里删除该节点attrs的slot
     */
     if (data &amp;&amp; data.attrs &amp;&amp; data.attrs.slot) {
      delete data.attrs.slot
     }
     /* 判断是否为具名插槽,如果为具名插槽,还需要子组件/函数子组件渲染上下文一致。主要作用:
     *当需要向子组件的子组件传递具名插槽时,不会保持插槽的名字。
     * 举个栗子:
     * child组件template: 
     * <p>
     * </p>
    <p><slot></slot></p>
     * <p><slot></slot></p>
     * 
     * parent组件template:
     * <child><slot></slot></child>
     * main组件template:
     * <parent><span>foo</span></parent>
     * 此时main渲染的结果:
     * <p>
     * </p>
    <p><span>foo</span></p>
       <p></p>
     * 
     */
     if ((child.context === context || child.fnContext === context) &amp;&amp;
      data &amp;&amp; data.slot != null
     ) {
      const name = data.slot
      const slot = (slots[name] || (slots[name] = []))
      // 这里处理父组件采用template形式的插槽
      if (child.tag === 'template') {
      slot.push.apply(slot, child.children || [])
      } else {
      slot.push(child)
      }
     } else {
      // 返回匿名default插槽VNode数组
      (slots.default || (slots.default = [])).push(child)
     }
     }
     // 忽略仅仅包含whitespace的插槽
     for (const name in slots) {
     if (slots[name].every(isWhitespace)) {
      delete slots[name]
     }
     }
     return slots
    }</vnode></vnode>
    登录后复制

    然后挂载dx-li组件时,会调用dx-li组件render函数,在此过程中会调用renderSlot函数:

    export function renderSlot (
      name: string, // 子组件中slot的name,匿名default
      fallback: ?Array<vnode>, // 子组件插槽中默认内容VNode数组,如果没有插槽内容,则显示该内容
      props: ?Object, // 子组件传递到插槽的props
      bindObject: ?Object // 针对<slot></slot> obj必须是一个对象
     ): ?Array<vnode> {
     // 判断父组件是否传递作用域插槽
      const scopedSlotFn = this.$scopedSlots[name]
      let nodes
      if (scopedSlotFn) { // scoped slot
      props = props || {}
      if (bindObject) {
       if (process.env.NODE_ENV !== 'production' &amp;&amp; !isObject(bindObject)) {
       warn(
        'slot v-bind without argument expects an Object',
        this
       )
       }
       props = extend(extend({}, bindObject), props)
      }
      // 传入props生成相应的VNode
      nodes = scopedSlotFn(props) || fallback
      } else {
      // 如果父组件没有传递作用域插槽
      const slotNodes = this.$slots[name]
      // warn duplicate slot usage
      if (slotNodes) {
       if (process.env.NODE_ENV !== 'production' &amp;&amp; slotNodes._rendered) {
       warn(
        `Duplicate presence of slot "${name}" found in the same render tree ` +
        `- this will likely cause render errors.`,
        this
       )
       }
       // 设置父组件传递插槽的VNode._rendered,用于后面判断是否有重名slot
       slotNodes._rendered = true
      }
      // 如果没有传入插槽,则为默认插槽内容VNode
      nodes = slotNodes || fallback
      }
      // 如果还需要向子组件的子组件传递slot
      /*举个栗子:
      * Bar组件: <p><slot></slot></p>
      * Foo组件:<p><bar><slot></slot></bar></p>
      * main组件:<p><foo>hello</foo></p>
      * 最终渲染:<p></p>
    <p>hello</p>
      */
      const target = props &amp;&amp; props.slot
      if (target) {
      return this.$createElement('template', { slot: target }, nodes)
      } else {
      return nodes
      }
     }</vnode></vnode>
    登录后复制

    scoped slots理解

    dx-li子组件的template如下:

    登录后复制
    登录后复制
  •       hello juejin!  
  • dx-ul父组件的template如下:
              {{scope.str}}     
    结合例子和Vue源码简单作用域插槽 dx-ul父组件中template编译后,产生组件render函数: module.exports={  render:function (){   var _vm=this;   var _h=_vm.$createElement;   var _c=_vm._self._c||_h;    return _c('ul', [_c('dx-li', {    // 可以编译生成一个对象数组    scopedSlots: _vm._u([{     key: "default",     fn: function(scope) {     return _c('span',       {},      [_vm._v(_vm._s(scope.str))]     )     }    }])    })], 1)   },  staticRenderFns: []  }

    其中 _vm._u函数:

    function resolveScopedSlots (
     fns, // 为一个对象数组,见上文scopedSlots
     res
    ) {
     res = res || {};
     for (var i = 0; i <p style="text-align: left;">子组件的后续渲染过程与slots类似。scoped slots原理与slots基本是一致,不同的是编译父组件模板时,会生成一个返回结果为VNode的函数。当子组件匹配到父组件传递作用域插槽函数时,调用该函数生成对应VNode。</p><p style="text-align: left;"><span style="color: #ff0000"><strong>总结</strong></span></p><p style="text-align: left;">其实slots/scoped slots 原理是非常简单的,我们只需明白一点vue在渲染组件时,是根据VNode渲染实际DOM元素的。</p><p style="text-align: left;">slots是将父组件编译生成的插槽VNode,在渲染子组件时,放置到对应子组件渲染VNode树中。</p><p style="text-align: left;">scoped slots是将父组件中插槽内容编译成一个函数,在渲染子组件时,传入子组件props,生成对应的VNode。最后子组件,根据组件render函数返回VNode节点树,update渲染真实DOM元素。同时,可以看出跨组件传递插槽也是可以的,但是必须注意具名插槽传递。</p><p>相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!</p><p>推荐阅读:</p><p><a href="http://www.php.cn/js-tutorial-393590.html" target="_blank">vue组件的slot插口使用详解</a><br></p><p><a href="http://www.php.cn/js-tutorial-393588.html" target="_blank">JS同源策略+跨域访问使用详解</a></p>
    登录后复制

    以上就是Vue中slot插槽使用详解的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    相关标签:
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号