插槽
插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./../../../vue.min.js"></script> </head> <body> <div id="app"> <cpn><span>www</span></cpn> <cpn><i>我是斜体</i></cpn> <cpn></cpn> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <h2>标题1</h2> <span>玩压缩</span> <slot><button>按钮</button></slot> </div> </template> <script> const cpn=Vue.extend({ template:"#cpn" }) new Vue({ el:"#app", components:{ cpn:cpn } }) </script> </body> </html>
具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <cpn><span slot="left"></span></cpn> <cpn><span slot="center"></span></cpn> <cpn><span slot="right"></span></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <slot><span name="left">左边</span></slot> <slot><span name="center">中间</span></slot> <slot><span name="right">右边</span></slot> <slot><button>按钮</button></slot> </div> </template> <script src="./../../../vue.min.js"></script> <script> const cpn=Vue.extend({ template:"#cpn" }) const app=new Vue({ el:"#app", components:{ cpn:cpn } }) </script> </body> </html>
作用域插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <cpn> <template slot-scope="slot"> <span v-for="item in slot.data">{{item}} - </span> </template> </cpn> <cpn> <template slot-scope="slot"> <span v-for="item in slot.data">{{item}} * </span> </template> </cpn> <cpn></cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join(" - ")}}</span> </template> </cpn> </div> <template id="cpn"> <div> <slot v-bind:data="language"> <ul> <li v-for="item in language">{{item}}</li> </ul> </slot> </div> </template> <script> const app=new Vue({ el:"#app", components:{ cpn:{ template:"#cpn", data(){ return { language : ["java","c++","javascript"] } } } } }) </script> </body> </html>
