<!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="example2">
            <navigation-link url="/profile">
                {{user.name}}
            </navigation-link>
        </div>
        <script>
        Vue.component('navigation-link', {        
            props: {
                url: String
            },
            template: '\
                <a\
                    v-bind:href="url"\
                    class="nav-link"\
                >\
                    <slot></slot>\
                </a>\
            '
        })
        var example2 = new Vue({
            el:'#example2',
            data: {
                user: {name: 'Vue'}
            }
        })
        </script>
        </div>
    </body>
</html>

如果在父级访问子级的url就会报错，如把对应html修改为：

<navigation-link url="/profile">
  {{ url }}
</navigation-link>