vue 组件中slot插口的具体用法

具名slot

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

var childNode = {
 template: `
 
 
子组件
 头部默认值
 主体默认值
 尾部默认值
 
 `,
};

var parentNode = {
 template: `
 
 
父组件
 
 
我是头部
 
我是尾部
 
 
 `,
 components: {
 'child': childNode
 },
};

仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽，有slot属性的元素如果没有配置slot，则会被抛弃

var childNode = {
 template: `
 
 
子组件
 主体默认值
 
 
 `,
};

var parentNode = {
 template: `
 
 
父组件
 
 
我是主体
 
我是其他内容
 
我是尾部
 
 
 `,
 components: {
 'child': childNode
 },
};
插入中，
我是其他内容
插入中，而
被丢弃

如果没有默认的 slot，这些找不到匹配的内容片段也将被抛弃

var childNode = {
 template: `
 
 
子组件
 主体默认值
 
 `,
};

var parentNode = {
 template: `
 
 
父组件
 
 
我是主体
 
我是其他内容
 
我是尾部
 
 
 `,
 components: {
 'child': childNode
 },
};
我是其他内容
和
都被抛弃

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

在父级中，具有特殊属性 scope 的