vue -prop by value

Using  v-bind to dynamic transmission prop. It is not clear at the beginning of the specific content to be rendered, is very useful

 

Package

<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>

 

page:

<template>
  <div>
    Home Content
    <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 {: ' Taobao ' },
        text {: ' Koala ' },
        text {: ' spell lot ' }
      ],
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
    ]
    };
  },