vue插槽什么作用？实现原理你了解吗？
发布时间：2022-02-22 13:44:14 所属栏目：语言 来源：互联网
导读：vue插槽什么作用？vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。对vue插槽的作用有简单的理解后，下面我们俩看看vue插槽实现原理。 一、样例代码 !-- 子组件comA -- template div class=demo slotslot slot name=tes
|
vue插槽什么作用？vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。对vue插槽的作用有简单的理解后，下面我们俩看看vue插槽实现原理。 一、样例代码 <!-- 子组件comA --> <template> <div class='demo'> <slot><slot> <slot name='test'></slot> <slot name='scopedSlots' test='demo'></slot> </div> </template> <!-- 父组件 --> <comA> <span>这是默认插槽</span> <template slot='test'>这是具名插槽</template> <template slot='scopedSlots' slot-scope='scope'>这是作用域插槽（老版）{{scope.test}}</template> <template v-slot:scopedSlots='scopeProps' slot-scope='scope'>这是作用域插槽（新版）{{scopeProps.test}}</template> </comA> 二、透过现象看本质 插槽的作用是实现内容分发，实现内容分发，需要两个条件： 占位符 分发内容 组件内部定义的slot标签，我们可以理解为占位符，父组件中插槽内容，就是要分发的内容。插槽处理本质就是将指定内容放到指定位置。废话不多说，从本篇文章中，将能了解到： 插槽的实现原理 render方法中如何使用插槽 三、实现原理 vue组件实例化顺序为：父组件状态初始化(data、computed、watch...) --> 模板编译 --> 生成render方法 --> 实例化渲染watcher --> 调用render方法，生成VNode --> patch VNode，转换为真实DOM --> 实例化子组件 --> ......重复相同的流程 --> 子组件生成的真实DOM挂载到父组件生成的真实DOM上，挂载到页面中 --> 移除旧节点 从上述流程中，可以推测出： 1.父组件模板解析在子组件之前，所以父组件首先会获取到插槽模板内容 2.子组件模板解析在后，所以在子组件调用render方法生成VNode时，可以借助部分手段，拿到插槽的VNode节点 3.作用域插槽可以获取子组件内变量，因此作用域插槽的VNode生成，是动态的，即需要实时传入子组件的作用域scope 整个插槽的处理阶段大致分为三步： 编译 生成渲染模板 生成VNode 以下面代码为例，简要概述插槽运转的过程。 <div id='app'> <test> <template slot="hello"> 123 </template> </test> </div> <script> new Vue({ el: '#app', components: { test: { template: '<h1>' + '<slot name="hello"></slot>' + '</h1>' } } }) </script> 四、父组件编译阶段 编译是将模板文件解析成AST语法树，会将插槽template解析成如下数据结构： { tag: 'test', scopedSlots: { // 作用域插槽 // slotName: ASTNode, // ... } children: [ { tag: 'template', // ... parent: parentASTNode, children: [ childASTNode ], // 插槽内容子节点，即文本节点123 slotScope: undefined, // 作用域插槽绑定值 slotTarget: ""hello"", // 具名插槽名称 slotTargetDynamic: false // 是否是动态绑定插槽 // ... } ] } 五、父组件生成渲染方法 根据AST语法树，解析生成渲染方法字符串，最终父组件生成的结果如下所示，这个结构和我们直接写render方法一致，本质都是生成VNode, 只不过_c或h是this.$createElement的缩写。 with(this){ return _c('div',{attrs:{"id":"app"}}, [_c('test', [ _c('template',{slot:"hello"},[_v("n 123n ")])],2) ], 1) } 六、父组件生成VNode 调用render方法，生成VNode,VNode具体格式如下： { tag: 'div', parent: undefined, data: { // 存储VNode配置项 attrs: { id: '#app' } }, context: componentContext, // 组件作用域 elm: undefined, // 真实DOM元素 children: [ { tag: 'vue-component-1-test', children: undefined, // 组件为页面最小组成单元，插槽内容放放到子组件中解析 parent: undefined, componentOptions: { // 组件配置项 Ctor: VueComponentCtor, // 组件构造方法 data: { hook: { init: fn, // 实例化组件调用方法 insert: fn, prepatch: fn, destroy: fn }, scopedSlots: { // 作用域插槽配置项，用于生成作用域插槽VNode slotName: slotFn } }, children: [ // 组件插槽节点 tag: 'template', propsData: undefined, // props参数 listeners: undefined, data: { slot: 'hello' }, children: [ VNode ], parent: undefined, context: componentContext // 父组件作用域 // ... ] } } ], // ... } 在vue中，组件是页面结构的基本单元，从上述的VNode中，我们也可以看出，VNode页面层级结构结束于test组件，test组件children处理会在子组件初始化过程中处理。子组件构造方法组装与属性合并在vue-devsrccorevdomcreate-component.js createComponent方法中，组件实例化调用入口是在vue-devsrccorevdompatch.js createComponent方法中。 七、子组件状态初始化 实例化子组件时，会在initRender -> resolveSlots方法中，将子组件插槽节点挂载到组件作用域vm中，挂载形式为vm.$slots = {slotName: [VNode]}形式。 八、子组件编译阶段 子组件在编译阶段，会将slot节点，编译成以下AST结构： { tag: 'h1', parent: undefined, children: [ { tag: 'slot', slotName: ""hello"", // ... } ], // ... } 九、子组件生成渲染方法 生成的渲染方法如下，其中_t为renderSlot方法的简写，从renderSlot方法，我们就可以直观的将插槽内容与插槽点联系在一起。 // 渲染方法 with(this){ return _c('h1',[ _t("hello") ], 2) } // 源码路径：vue-devsrccoreinstancerender-helpersrender-slot.js export function renderSlot ( name: string, fallback: ?Array<VNode>, props: ?Object, bindObject: ?Object ): ?Array<VNode> { const scopedSlotFn = this.$scopedSlots[name] let nodes if (scopedSlotFn) { // scoped slot props = props || {} if (bindObject) { if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) { warn( 'slot v-bind without argument expects an Object', this ) } props = extend(extend({}, bindObject), props) } // 作用域插槽，获取插槽VNode nodes = scopedSlotFn(props) || fallback } else { // 获取插槽普通插槽VNode nodes = this.$slots[name] || fallback } const target = props && props.slot if (target) { return this.$createElement('template', { slot: target }, nodes) } else { return nodes } } 作用域插槽与具名插槽区别 <!-- demo --> <div id='app'> <test> <template slot="hello" slot-scope='scope'> {{scope.hello}} </template> </test> </div> <script> var vm = new Vue({ el: '#app', components: { test: { data () { return { hello: '123' } }, template: '<h1>' + '<slot name="hello" :hello="hello"></slot>' + '</h1>' } } }) </script> 作用域插槽与普通插槽相比，主要区别在于插槽内容可以获取到子组件作用域变量。由于需要注入子组件变量，相比于具名插槽，作用域插槽有以下几点不同： 作用域插槽在组装渲染方法时，生成的是一个包含注入作用域的方法，相对于createElement生成VNode，多了一层注入作用域方法包裹，这也就决定插槽VNode作用域插槽是在子组件生成VNode时生成，而具名插槽是在父组件创建VNode时生成。_u为resolveScopedSlots，其作用为将节点配置项转换为{scopedSlots: {slotName: fn}}形式。 with (this) { return _c('div', { attrs: { "id": "app" } }, [_c('test', { scopedSlots: _u([{ key: "hello", fn: function(scope) { return [_v("n " + _s(scope.hello) + "n ")] } }]) })], 1) } 子组件初始化时会处理具名插槽节点，挂载到组件$slots中，作用域插槽则在renderSlot中直接被调用 除此之外，其他流程大致相同。插槽作用机制不难理解，关键还是模板解析与生成render函数这两步内容较多，流程较长，比较难理解。 十、使用技巧 通过以上解析，能大概了解插槽处理流程。工作中大部分都是用模板来编写vue代码，但是某些时候模板有一定的局限性，需要借助于render方法放大vue的组件抽象能力。那么在render方法中，我们插槽的使用方法如下： 10.1、具名插槽 插槽处理一般分为两块： 父组件：父组件只需要写成模板编译成的渲染方法即可，即指定插槽slot名称 子组件：由于子组件时直接拿父组件初始化阶段生成的VNode，所以子组件只需要将slot标签替换为父组件生成的VNode，子组件在初始化状态时会将具名插槽挂载到组件$slots属性上。 <div id='app'> <!-- <test>--> <!-- <template slot="hello">--> <!-- 123--> <!-- </template>--> <!-- </test>--> </div> <script> new Vue({ // el: '#app', render (createElement) { return createElement('test', [ createElement('h3', { slot: 'hello', domProps: { innerText: '123' } }) ]) }, components: { test: { render(createElement) { return createElement('h1', [ this.$slots.hello ]); } // template: '<h1>' + // '<slot name="hello"></slot>' + // '</h1>' } } }).$mount('#app') </script> 10.2、作用域插槽 作用域插槽使用比较灵活，可以注入子组件状态。作用域插槽 + render方法，对于二次组件封装作用非常大。举个栗子，在对ElementUI table组件进行基于JSON数据封装时，作用域插槽用处就非常大了。 <div id='app'> <!-- <test>--> <!-- <span slot="hello" slot-scope='scope'>--> <!-- {{scope.hello}}--> <!-- </span>--> <!-- </test>--> </div> <script> new Vue({ // el: '#app', render (createElement) { return createElement('test', { scopedSlots:{ hello: scope => { // 父组件生成渲染方法中，最终转换的作用域插槽方法和这种写法一致 return createElement('span', { domProps: { innerText: scope.hello } }) } } }) }, components: { test: { data () { return { hello: '123' } }, render (createElement) { // 作用域插槽父组件传递过来的是function，需要手动调用生成VNode let slotVnode = this.$scopedSlots.hello({ hello: this.hello }) return createElement('h1', [ slotVnode ]) } // template: '<h1>' + // '<slot name="hello" :hello="hello"></slot>' + // '</h1>' } } }).$mount('#app') </script> （编辑：平顶山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
