vue slot的原理_vue slot原理

  父组件使用test组件
  <div>
    <test>
      插入slot中的内容
    </test>
  </div>

  子组件test模板
  <main>
    <slot>插槽位置</slot>
  </main>
1
2
3
4
5
6
7
8
9
10
11

先解析的是父组件，解析到的插槽节点，保存下来

{    
    tag: "div",    
    children: [{        
        tag: "test",        
        children: ['插入slot 中']
    }]
}
1
2
3
4
5
6
7

2、子组件解析，slot 作为一个占位符，会被解析成一个函数
solt是一个占位符，他会解析成一个函数 本质上返回一个vnode

{    
    tag: "main",    
    children: [
        '我在子组件里面',
        _t('default')
    ]
}
1
2
3
4
5
6
7

这个 _t 函数，传入 'default ' 参数并执行
因为这里不给名字，默认插槽，所以是default，
如果给了名字，就传入你的名字
这个函数的作用，是把第一步解析得到的插槽节点拿到，然后返回
那么子组件的节点就完整了，插槽也成功认了爹
1
2
3
4
5

作用域插槽的原理

1、父组件先解析，把 插槽包装成一个函数，保存给节点

{    
    tag: "div",    
    children: [{        
        tag: "test"
        scopeSlots:{ 解析到的插槽节点，包装成一个函数，保存给节点            
            default(slotProps){                
                return ['插入slot 中' + slotProps]
            }
        }
    }]
}
1
2
3
4
5
6
7
8
9
10
11

2、子组件解析，slot 作为一个占位符，会被解析成一个函数

{    
    tag: "main",    
    children: [
        '我在子组件里面',
        _t('default',{child:11})
    ]
}
1
2
3
4
5
6
7

_t 内部执行

1、根据传入的名字（'default'），拿到第一步解析插槽得到的函数
（代号为A）
2、执行A，传入参数 { child:11 }

于是作用域插槽，就拿到了子组件传过来的数据了
插槽函数执行，会返回解析后的插槽节点，_t 拿到这个节点，
直接 return 出去
于是子组件插槽就完成替换 slot 占位符了，变成下面这样
1
2
3
4
5
6
7
8
9
10

{    
    tag: "main",    
    children: [
        '我在子组件里面',
        _t('default',{child:11})
    ]
}

变成下面这样

{    
    tag: "main",    
    children: [
        '我在子组件里面', 
        '插入slot 中 {child:11}'
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

原文链接