分类：插槽

2021
09-29

浅谈Vue插槽实现原理

目录一、样例代码二、透过现象看本质三、实现原理四、父组件编译阶段五、父组件生成渲染方法六、父组件生成VNode七、子组件状态初始化八、子组件编译阶段九、子组件生成渲染方法十、使用技巧10.1、具名插槽10.2、作用域插槽一、样例代码<!--子组件comA--><template><divclass='demo'><slot><slot><slotname='test'></slot><slotname='scopedSlots'test='demo'></slot></div></template><!--父组件--><comA... 继续阅读 >
2020
11-19

vue 插槽简介及使用示例

Vue的插槽，是一种内容分发机制，但是我感觉它更加像组件的一种占位符的概念，通过插槽，等待组件外部传入复杂的内容。使用插槽的好处在以前的例子中todo-item插槽直接写在了todo-list插槽中，其实是比较不合理的，它会导致todo-list插槽比较死板，无法重用更多的其他组件。Vue.component("todo-list",{template:`<ul><todo-itemv-on:delete="handleDelete"v-for="iteminlist"data-wen="wen":title... 继续阅读 >
2020
10-08

Vue作用域插槽实现方法及作用详解

Vue作用域插槽实现方法及作用详解 默认插槽和具名插槽的概念比较好理解，这里主要以官方文档的案例来讲解一下作用域插槽。首先是有一个currentUser的组件：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><divid="app"><current-user>{{user.firstName... 继续阅读 >
2020
09-24

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

本文实例讲述了vue使用插槽分发内容操作。分享给大家供大家参考，具体如下：单个插槽除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的DOM位置，并替换掉插槽标签本身。最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的... 继续阅读 >