Vue——组件的插槽

组件的插槽：

　　代码示例：

　　

<!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>

 

posted @ 2018-07-31 04:53  Coca-Mirinda  阅读(571)  评论(0)  编辑  收藏  举报