Property or method "info" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components,
源代码
App.Vue
<template>
<div>
<test v-for="post in posts" v-bind:title="post.title">
</test>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld'/*要使用哪个模块就要显示调用声明*/
import test from './View/test'
export default {/*导出的是整个MVVM框架的信息*/
name: 'App',/*这个是组件的name*/
components: {/*组件的引入*/
test
},
}
</script>
<style>
</style>
test.vue
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name:'test',
props:['title'],
data(){
return {
posts:[
{id:1,title:'one'},
{id:2,title:'two'},
{id:3,title:'three'}
],
}
}
}
</script>
<style scoped>
</style>
我在App.vue中取了test.vue的值,所有浏览器会报posts没有定义
解决方法
将test.vue中data()方法转移到App.vue中
App.vue
<template>
<div>
<test v-for="post in posts" v-bind:title="post.title">
</test>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld'/*要使用哪个模块就要显示调用声明*/
import test from './View/test'
export default {/*导出的是整个MVVM框架的信息*/
name: 'App',/*这个是组件的name*/
components: {/*组件的引入*/
test
},
data(){
return {
posts:[
{id:1,title:'one'},
{id:2,title:'two'},
{id:3,title:'three'}
],
}
}
}
</script>
<style>
</style>
test.vue
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name:'test',
props:['title'],
}
</script>
<style scoped>
</style>