首页 > 代码库 > vue21 slot占位

vue21 slot占位

2024-10-03 23:48:02   216人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
<!--slot:
    位置、槽口
    作用: 占个位置

    类似ng里面 transclude  （指令）-->
    <div id="box">
        <aaa>
            <ul> <!--出不来-->
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </aaa>
    </div>

    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:‘aaa‘
            },
            components:{
                ‘aaa‘:{
                    template:‘<h1>xxxx</h1>‘
                }
            }
        });

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
            <ul>
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </aaa>
    </div>
    <template id="aaa">
        <h1>xxxx</h1>
        <slot>这是默认的情况</slot> <!--ul出来了-->
        <p>welcome vue</p>
    </template>

    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:‘aaa‘
            },
            components:{
                ‘aaa‘:{//标签名
                    template:‘#aaa‘//模版位置
                }
            }
        });

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
            <ul slot="ul-slot">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
            <ol slot="ol-slot">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </aaa>
        <hr>
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>xxxx</h1>
        <slot name="ol-slot">这是默认的情况</slot>
        <p>welcome vue</p>
        <slot name="ul-slot">这是默认的情况2</slot>
    </template>

    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:‘aaa‘
            },
            components:{
                ‘aaa‘:{
                    template:‘#aaa‘
                }
            }
        });

    </script>
</body>
</html>

 

vue21 slot占位


联系
我们