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

我已使用Vue cli设置了一个新的Vue应用程序。我有vue加载器和vue路线也在这个项目中运行

在下面的实例中，如何访问属性

events

当前，下面的代码导致以下错误：

属性或方法“events”未在实例上定义，但在渲染期间被引用

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>

家|
关于


{{event.name}
{{event.price}}

这是怎么回事。$root.events或在应用程序组件中创建一个计算属性，并在其中分配根事件。

您的

events

数据仅存在于

main.js

中，但您正在

app.vue

中使用它，而它没有访问权限

要呈现

事件

数据，您可以将

事件

作为

道具

传递给

应用程序

组件

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>


家|
关于


{{event.name}
{{event.price}}



导出默认值{
名称：“应用程序”，
道具：[“事件”]
}
您可以将其作为道具传递，并使用模板属性
模板：“”，
按如下方式呈现应用程序组件：

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')

newvue({
路由器，
商店，
模板：“”，
//资料
数据：{
活动：[
{
名称：'这个'，
价格：2000
},
{
名字：'那个'，
价格：3000
},
{
名字：'另一个'，
价格：4000
},
]
}
}).$mount（“#应用程序”）

在App.vue中：

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


....
导出默认值{
道具：[“事件”]
}
是的
this.$root.events
立即生效。谢谢：）@DevLime不建议以这种方式访问父数据，请检查此问题是的！同样有效。当需要对初始属性进行全局访问时，是否有更好的方法来执行此操作？因此，如果我在其他任何地方更新此文件，所有其他视图也会更新。@DevLime引用官方文档，您可以将此文件用于演示或包含少量组件的非常小的应用程序。但是，使用
this.$root
访问根实例不能很好地扩展到中型或大型应用程序。是的，不建议使用
this.$root
访问父数据，就像我解释的那样，谢谢。这仅适用于技术演示，但它将跨多个组件传输数据，并相应地更新所有视图，这种方法在这种情况下有效吗？快速更新-是。这是完全点击现在。非常正确的方法：）