在Vue中使用插槽 插槽和具名插槽/作用域插槽
阿新 • • 發佈:2018-12-19
在Vue中使用插槽插槽和具名插槽
<body> <div id="app"> <child content="<p>123</p>"> <h1>Dell</h1> </child> <div>------------------</div> <body-content> <div class='header' slot='header'> header </div> <div class='footer' slot='footer'> footer </div> </body-content> </div> <script> Vue.component('child',{ props:['content'], template: `<div> <p>hello</p> <div v-html="this.content"></div> <slot>default content</slot> </div>` }) // vue中的具名插槽 Vue.component('body-content',{ // 多行字串語法 template: `<div> <slot name='header'> <div>default header</div> </slot> <div class='content'>content</div> <slot name='footer'></slot> </div>` }) var vm = new Vue({ el: "#app" }) </script> </body>
作用域插槽 固定寫法
<body> <div id="app"> <child> <template slot-scope="props"> <li>{{props.item}}</li> </template> </child> </div> <script> Vue.component('child',{ data: function(){ return { list: [1,2,3,4] } }, template:`<div> <ul> <slot v-for="item of list" :item=item> </slot> </ul> </div>` }) var vm = new Vue({ el: "#app" }) </script> </body>