阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 中什么是作用域插槽?

      问题

      什么是作用域插槽?

      答案

      1.插槽

      <app><div slot="a">xxxx</div><div slot="b">xxxx</div></app>
      slot name="a"
      slot name="b"
      
      • 创建组件虚拟节点时,会将组件的儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}
      • 渲染组件时会拿对应的slot属性的节点进行替换操作。(插槽的作用域为父组件)

      2.作用域插槽:

      • 作用域插槽在解析的时候,不会作为组件的孩子节点。会解析成函数,当子组件渲染时,会调用此函数进行渲染。(插槽的作用域为子组件)

      https://a.axihe.com/focus/vue/27.jpg

      对应源码

      1.插槽:

      const VueTemplateCompiler = require('vue-template-compiler');
      let ele = VueTemplateCompiler.compile(`
          <my-component>
              <div slot="header">node</div>
              <div>react</div>
              <div slot="footer">vue</div>
          </my-component>
      `)
      /** 
      with(this) {
          return _c('my-component', [_c('div', {
              attrs: {
                  "slot": "header"
              },
              slot: "header"
          }, [_v("node")]), _v(" "), _c('div', [_v("react")]), _v(" "), _c('div', {
              attrs: {
                  "slot": "footer"
              },
              slot: "footer"
          }, [_v("vue")])])
      }
      */
      
      const VueTemplateCompiler = require('vue-template-compiler');
      let ele = VueTemplateCompiler.compile(`
          <div>
              <slot name="header"></slot>
              <slot name="footer"></slot>
              <slot></slot>
          </div>
      `);
      /**
      with(this) {
          return _c('div', [_t("header"), _v(" "), _t("footer"), _v(" "), _t("default")], 2)
      }
      **/
      // _t定义在 core/instance/render-helpers/index.js
      

      作用域插槽:

      
      let ele = VueTemplateCompiler.compile(`
          <app>
              <div slot-scope="msg" slot="footer">{{msg.a}}</div>
          </app>
      `);
      /**
      with(this) {
          return _c('app', {
              scopedSlots: _u([{ // 作用域插槽的内容会被渲染成一个函数
                  key: "footer",
                  fn: function (msg) {
                      return _c('div', {}, [_v(_s(msg.a))])
                  }
              }])
          })
      	}
      }
      */
      const VueTemplateCompiler = require('vue-template-compiler');
      
      VueTemplateCompiler.compile(`
          <div>
              <slot name="footer" a="1" b="2"></slot>
          </div>
      `);
      /**
      with(this) {
          return _c('div', [_t("footer", null, {
              "a": "1",
              "b": "2"
          })], 2)
      }
      **/
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录