如何在組件中使用Vue實例數據？

Question

我在vuejs實例定義了一些數據，但是當我使用的數據，我收到此消息：

屬性或方法「URL」沒有在實例中定義，但在渲染引用。確保在數據選項中聲明反應數據屬性。

這是數據所在位置：

Vue.component('app-dashboard', require('./components/AppDashboard.vue')); 
Vue.component('header-top', require('./components/Header.vue')); 
Vue.component('navbox', require('./components/Navbox.vue')); 
Vue.component(Vodal.name, Vodal); 

const app = new Vue({ 
    el: '#app', 
    data: { 
     url: { 
     dashboard: laroute.route('dashboard'), 
     request: laroute.route('requests.get'), 
     send: laroute.route('requests.send'), 
     history: laroute.route('history'), 
     userAll: laroute.route('users.all') 
     } 
    } 
}); 

這是我如何使用我的組件中的數據：

// Header.vue 
    <li class="nav-item active"> 
      <a class="nav-link" :href="url.dashboard">Dashboard <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" :href="url.request">File Request</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" :href="url.send">Send Files</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" :href="url.history">History</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" :href="url.userAll">User Management</a> 
     </li> 

Answer 1

在Vue公司，兒童沒有進入他們的父母的數據直接，你需要把它作爲一個屬性傳遞下去。

在你Header.vue組件，你應該定義一個屬性叫做url

export default { 
    props:["url"], 
    ... 
} 

，並通過在父模板中的值。

<header-top :url="url"></header-top> 

Vue文檔非常好。您應該通讀component composition。