<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet"  type="text/css" href="index.css"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--插槽内容--</h1>
        <div id="example1">
            <navigation-link url="/profile">
                Your Profile
            </navigation-link>
            </br>
            <navigation-link url="/profile">
                <span class="fa fa-user"></span>
                Your Profile
            </navigation-link>
        </div>
        <script>
        Vue.component('navigation-link', {        
            props: {
                url: String
            },
            template: '\
                <a\
                    v-bind:href="url"\
                    class="nav-link"\
                >\
                    <slot></slot>\
                </a>\
            '
        })
        var example1 = new Vue({
            el:'#example1'
        })
        </script>
        </div>
    </body>
</html>

 

运行效果：