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' }
    ]
    };
  },