Vue——组件的插槽

Posted 2020-12-26 zsdbk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于Vue——组件的插槽的主要内容，如果未能解决你的问题，请参考以下文章