Day 22：儿子乖听爸的话－Props 传入资料

之前在 Day15 曾示范单独在 All.vue 发送 API 取得资料後渲染至画面上，而上篇我们接续完成其他导览项目所需要的画面资料时，应该会发现页面内容的排版是一致的，为了省去在多个元件内重复复制贴上排版程序码，建议可以将排版样式包成一个 layout 元件，透过 views 资料夹内的元件引用 layout 元件时，再将资料传递过去显示在画面上即可。

因此子元件只需要选好资料要传入的位置，由父元件决定传入什麽资料。

首先，在 components 资料夹内新增一个 BookList.vue，只将 HTML 排版内容和 SCSS 样式移驾至此，观察目前 <template> 和模板语法的结构，会有两笔资料需要从外部传入：

• {{ navTitle }} 标题名称
• {{ bookList.length }}、v-for 需要递回的 bookList 书单资料

<div class="BookList">
    <h1>{{ navTitle }}</h1>
    <p>共计 {{ bookList.length }} 本书</p>
    <div class="bookshelf">
      <div class="book" v-for="book in bookList" :key="book.id">
        <img :src="book.image" alt="book image" />
        <p>
          原价：<span>{{ book.originPrice }}</span> ｜ 
					特价：<span class="bargain">{{ book.sellPrice }}</span>
        </p>
        <p>ISBN：<span>{{ book.ISBN }}</span></p>
        <p><span>{{ book.name }}</span></p>
        <a :href="book.link" target="_blank">连结</a>
      </div>
    </div>
  </div>

Prop：定义需要接收来自父元件的资料

• 若无特别指定的设置，可使用「阵列形式」。

  props: ['navTitle', 'bookList']
  

• 若需要更详细的指定设置，则使用「物件形式」加以说明。

  • type：设定型别

    props: {
      navTitle: String,  
      bookList: Array,
    }
    

  • required：设定是否为必填项目

    props: {
      navTitle: {
        type: [String, Number], // 一次列齐多个可能的型别
        required: false,
      },
      bookList: {
        type: Array,
        required: true,
      },
    }
    

  • default 设定预设值：当父层引用时没有指定 navTitle 内容，才会显示预设值中的内容。

    props: {
      navTitle: {
        type: String,
    	default: 'BookList',
        required: false,
      },
      bookList: {
        type: Array,
        required: true,
      },
    }
    

将资料从父层传入子层（外→内）

• 传入静态资料：传入的资料已固定，不再改变。

  <BookList navTitle="All" />
  

• 传入动态资料：利用 v-bind 绑定资料，若父层资料有所变动，传入子元件的资料也会同步更新。

  <BookList :bookList="books"/>
  

  	computed: {
      books() {
        return this.$store.getters["allBooks"];
      },
    },
  

参考资料

• Vue.js - Props
• Vue.js - API - props