slot传函数 vue_vue中的插槽slot理解

本篇文章参考赛冷思的个人博客

1.函数默认传参

在我们写js函数我们的可能会给他们一个默认的参数，写法是

functionshow(age,name){var age = age || 20;var name = name ||张三;

console.log(age,name);

}

show();//20,张三

show(18,"命名") //18,明明

如果用户不传入参数，那么会输出默认值，如果用户传入，会输出传入的值，这种写法很灵活

vue中的组件，也可以有默认的模板，当我们调用一个组件，啥都不传时，显示我们定义的默认模板，当我们传了自定义模板时，就应该使用我们自定义的模板，来替换默认模板，那么，今天说的slot，其实它就是实现的这个功能，可以理解为函数的传参。下面以类似官方的例子进行解释。

现在有个一个模板 child

我是子组件的标题

当父组件调用我时，没有传自定义内容时，我就会显示了，如果传了自定义内容，我就不显示了。

slot中的就是默认参数，如果我们不传入参数

就会被渲染成

我是子组件的标题

当父组件调用我时，没有传自定义内容时，我就会显示了，如果传了自定义内容，我就不显示了。

如果我们传入参数

这是我自定义的内容，覆盖子组件slot中的内容

渲染为

我是子组件的标题

这是我自定义的内容，覆盖子组件slot中的内容

我们可以看到child中的元素会把模板中的内容改变,就好像我们传入的参数一样，所有理解为默认模板

但是可以看到，这种方式过于粗暴，并且只能定义一块默认内容，不是很方便，所以官方说了，slot还提供了一个具名功能，意思就是，在子组件定义slot时，加个标识，在父组件调用，自定义内容时，也加上标识，这样就实现了可以在任意地方定义默认内容，下面有请具名slot，其实就是给slot起个名字

默认header

默认main

默认footer

上面的是子组件，我们给每一个slot一个name属性，如果是默认值的话，name是没有什么作用的，在传参时，我们可以让child中的元素，加上slot属性

自定义标题

自定义底部

自定义main

所以，我们的child最后就被渲染成了

自定义标题

自定义main

自定义底部

在子组件定义slot加个name属性值，在父组件调用时，加上slot属性，值就是子组件中slot的name属性值，这样就会自动定位到对应的slot中，就实现了多个地方定义默认内容。

2019年7月3日更新，最近vue跟新了2.6版本，slot的语法变了，但是整体的作用没有改变，上面的语法已经废弃了，新的语法是 slot 和 template+v-slot，需要用的小伙伴去官网查看新的语法