当定义完一个组件后，可能在使用时还需要往这个组件中插入新的元素或者文本。这个时候就可以使用插槽来完成。
- 在定义`template`时，在需要插入的地方使用`<slot></slot>`标识出来。在使用时只需将传递的值放在定义的组件标签包裹起来即可。
- 插槽可以设置默认值。在定义template时，用`slot`标签包裹起来即可，当没有传递值时就使用默认值，但传值后，则使用新的值。
-
插槽当中的变量是从父组件的变量中读取的，而非从该组件中读取。也就是说：在插槽中使用`{{ }}` 定义的变量时，这个变量一定是在使用父组件的data中定义的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue中插槽</title> </head> <body> <div id="app"> <nav-link url="https://www.baidu.com">百度</nav-link> </div> <script> Vue.component('nav-link', { props: ['url'], template: ` <div> <nav><a :href="url"><slot>谷歌</slot></a></nav> </div> ` }) new Vue({ el: "#app", data: { } }) </script> </body> </html>