如何在.vue组件模板中访问inital应用程序实例的属性？
如何在.vue组件模板中访问inital应用程序实例的属性？
提问于 2019-01-27 17:24:12
我用vue-cli建立了一个新的Vue应用程序。我有vue装载机和和vue路线也运行在这个项目.
如何在以下实例中访问属性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>回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-27 17:36:30
您的events数据只存在于main.js中，但是您正在App.vue中使用它，而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>Stack Overflow用户
发布于 2019-01-27 17:34:33
如何在应用程序组件中创建一个计算属性，并在其中分配根事件呢？
Stack Overflow用户
发布于 2019-01-27 17:38:10
您可以将其作为支柱传递，并使用模板属性template:"<App :events='events'/>",呈现应用程序组件，如下所示：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54390842
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号