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。

如何在组件中使用Vue实例数据？

1 个答案: