【20】vue.js — slot佔位符

有心部落格發表於2017-09-12
Vue.js

預設情況下我們使用元件會將元件標籤內的內容給替換掉，不會顯示元件內的內容

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

相關文章