vue组件的内容分发
为了让组件可以组合，需要一种方式来混合父组件内容和子组件内容模板，这个过程叫做内容分发
插槽：
单<slot>标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <my-head> <my-title></my-title> </my-head> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:"#app", components:{ "my-head":{ template:`<div>head<slot></slot></div>` }, "my-title":{ template:`<h2>title</h2>` } } }) </script> </body> </html>
多<slot>标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <my-head> <button slot="left"><-</button> <button slot="right">-></button> </my-head> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:"#app", components:{ "my-head":{ template:`<div><slot name="left"></slot>head<slot name="right"></slot></div>` }, "my-title":{ template:`<h2>title</h2>` } } }) </script> </body> </html>
<slot>默认值
可以在slot里面直接写，但是如果写了，就是写的。