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>