组件的插槽：
代码示例：
<!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='../../inputfiles/vue.js'></script> </head> <body> <div id="app"> <p>总消费量：{{totalCount}}</p> <tan v-bind:name="name" v-on:tank='add'> // 可以为插槽起名 <span slot="haha">哈哈哈！</span> <span slot='heihei'>嘿嘿嘿！</span> </tan>
// 第二种替换方式 <tan v-bind:name="name" v-on:tank='add'> // 可以为插槽起名 <template slot='haha'>
<span slot="haha">哈哈哈！</span>
<h1 slot='heihei'>嘿嘿嘿！</h1>
</template>
<span slot='heihei'>嘿嘿嘿！</span>
</tan> </div> <script> // 这里注意一定要用div将template中的标签抱起来 const tanComponent={ template:` <div> <button v-on:click='jump'>{{name}}{{count}}</button> <slot name='haha'></slot> <slot name='heihei'></slot> </div> `, data:function(){ return { count:0 } }, props:{ name:String }, methods:{ jump:function(){ this.count += 1 this.$emit('tank') }, } } var vm = new Vue({ el:"#app", data:{ totalCount:0, name:'奇谈' }, components:{ tan:tanComponent }, methods:{ add:function(){ this.totalCount += 1 } } }) </script> </body> </html>