【20】vue.js — slot占位符

来源：互联网发布：根域名服务器分布编辑：程序博客网时间：2024/06/05 01:15

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

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

阅读全文

0 0