默认情况下我们使用组件会将组件标签内的内容给替换掉,不会显示组件内的内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <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>

未使用slot

使用slot来占位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
            </aaa>
            <hr />
            <aaa></aaa>
        </div>
        <template id="aaa">
            <h1>我是模板一</h1>
            <slot>这是默认的情况</slot>
            <p>welcome vue</p>
        </template>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'aaa': {
                    template: '#aaa'
                }
            }
        });
    </script>
</html>

有区分的替换占位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa>
                <ul slot="ul-slot">
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
                <ol slot="ol-slot">
                    <li>aaa</li>
                    <li>bbb</li>
                    <li>ccc</li>
                </ol>
            </aaa>
            <hr />
            <aaa></aaa>
        </div>
        <template id="aaa">
            <h1>我是模板一</h1>
            <slot name="ul-slot">ul替换占位符</slot>
            <slot name="ol-slot">ol替换占位符</slot>
            <p>welcome vue</p>
        </template>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'aaa': {
                    template: '#aaa'
                }
            }
        });
    </script>
</html>

vue占位槽slot

Logo

前往低代码交流专区

更多推荐