1. 插槽的作用:
如果没有在组件模板中放置插槽<slot>,则在html 代码中组件自定义元素之间的内容将不显示;
如果在组件模板中设置插槽<slot>,则相当于,在组件中提前预留了位置,给在html 代码中组件自定义元素之间的内容放置。即使vue 组件被封装好了不再改动,也可以在html 层面上,在自定义元素之间增加内容或者设置样式等操作。
详见:插槽的作用
例子解析:在模板中添加了 <slot></slot>,是给 html 层面自定义元素 <navigation-link></navigation-link> 中间的内容 "Your Profile" 预留了显示的位置。
如果模板中没有添加<slot></slot>,在 html 层面自定义元素之间的内容将会被抛弃(深入点理解组件和html 的关系:就是html只会显示在组件模板中定义的内容。如果在 html 层面自定义元素中间插入其他内容,而没有提前在模板中定义(没有放置<slot> 作为预留位置),自定义元素中间的内容将会被抛弃ÿ