vue -prop傳值

使用 v-bind 來動態傳遞 prop。這在一開始不清楚要渲染的具體內容，是非常有用的

 

組件

<template>
  <div>
    <h3 v-for="(item,index) in list" :key="index">{{item}}----{{index}}</h3>
  </div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            required:false,
        }
    },
  
  data() {
    return {
      posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
    };
  }
};
</script>

 

頁面：

<template>
  <div>
    首頁內容
    <ul id="example-1">
      <li v-for="(item, index) in sites "  :key="item.index">
      {{ item.text }}---{{index}}
      </li>
    </ul>
      <TypeItem :list = "posts"/>
  </div>
</template>
<script>
import TypeItem from "@/components/component/TypeItem";
export default {
  data() {
    return {
      sites:[
        {text:'淘寶'},
        {text:'考拉'},
        {text:'拼多多'}
      ],
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
    ]
    };
  },