如何在 .vue 组件模板中访问初始应用程序实例的属性？

Question

我已经使用 vue-cli 设置了一个新的 Vue 应用程序。我在这个项目中也有 vue-loader 和 vue-route 运行。

如何在以下实例中访问属性 events？

目前，以下代码会导致以下错误：Property or method "events" is not defined on the instance but referenced during render

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function(y) {
    return y(App)
  },
    // Data
    data: {
        events: [
            {
                name : 'this',
                price : 2000
            },
            {
                name : 'that',
                price : 3000
            },
            {
                name : 'the-other',
                price : 4000
            },
        ]
    }
}).$mount('#app')

./App.vue

<template>
  <div id="app">
    <div id="nav">

      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

    </div>


      <ul>
          <li v-for="event in events">
              <h2>{{ event.name }}</h2>
              <p>{{ event.price }}</p>
          </li>
      </ul>



      <router-view/>
  </div>
</template>

Answer 1

这个怎么样。$root.events 或在您的应用程序组件中创建一个计算属性并在那里分配根事件。

Answer 2

您的 events 数据仅存在于 main.js 中，但您正在 App.vue 中使用它，而后者无权访问它。

要呈现 events 数据，您可以将 events 作为 props 传递给 App 组件。

render: function(y) {
  return y(App, {
    props: {
      events: this.events
    }
  });
}

在你的 App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

    </div>
      <ul>
          <li v-for="event in events">
              <h2>{{ event.name }}</h2>
              <p>{{ event.price }}</p>
          </li>
      </ul>

      <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    props: ['events']
  }
</script>

Answer 3

您可以将其作为 prop 传递并使用模板属性 template:"<App :events='events'/>", 来呈现 App 组件，如下所示：

new Vue({
  router,
  store,
 template:"<App :events='events'/>",
    // Data
    data: {
        events: [
            {
                name : 'this',
                price : 2000
            },
            {
                name : 'that',
                price : 3000
            },
            {
                name : 'the-other',
                price : 4000
            },
        ]
    }
}).$mount('#app')

在 App.vue 中：

 <template>
 ....
</template>
 <script>
  export default {
    props: ['events']
  }
 </script>

如何在 .vue 组件模板中访问初始应用程序实例的属性？

How to access a property of the inital app instance, in a .vue component template?

vue.js

vue-router

vue-component

vue-loader

vuejs2

如何在 .vue 组件模板中访问初始应用程序实例的 属性？

How to access a property of the inital app instance, in a .vue component template?

vue.js

vue-router

vue-component

vue-loader

vuejs2

如何在 .vue 组件模板中访问初始应用程序实例的属性？