原始碼
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>