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