【Vue】Props的基礎概念與用法

(以下是使用 CDN，而不是使用 Vue cli 的方式)

在 Vue 中，每個元件的資料是獨立存在的。我們不能從 A 元件引用 B 元件的資料，也不能從根元件引用子元件的資料內容。偏偏，實務上，還是會需要做跨元件的資料引用。Props 就是對應到這個問題的解決方式之一。Props 負責的是從母元件傳遞資料到子元件。(至於其他的跨元件方式，則有其他的方法)

props 的使用方式和一般使用 data 綁定的方式非常相似。程式碼可能像是這樣：

一般使用 data 的方式

HTML

1
2
3

<div id="app">
  <btn></btn>
</div>

…
元件

 Vue.component('btn', {
        data: function () {
          return {
            counter: 0,
          }
        },
        template:
        `
        <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{counter}</button> 下。
        `
});

…

在元件的 template 可以看到，這個元件使用 { } 的方式引用元件本身的 data 。
(因為 Hexo 用兩個大括號會跳錯，所以這邊我只用單個…)

Props 也是差不多

HTML

1
2
3

<div id="app">
  <photo></photo>
</div>

…
子元件

<script type="text/x-template" id="photo">
  <div>
      <img :src="imgUrl" class="img-fluid" alt="" />
      <p>風景照</p>
  </div>
</script>

Vue.component('photo', {
  props: ['imgUrl'],
  template: '#photo'
});

上述只是建立起元件接收外部資料傳遞進來的環境

在這邊，如果直接渲染到網頁上，不會看見任何的圖片。因為這個步驟只是建立起一個「環境」。我們透過在元件新增一個「props」的屬性，並賦予這個 props 一個值。這個值為 props 的名稱，提供我們在 template 上使用。

在 Props 的程式碼中，我們建立好元件的外來資料引入的環境，透過 :src=”propsName” 的方式，告知 Vue 未來資料傳遞進來時，要用什麼樣的方式使用在元件上。

使用元件時，把資料傳進子元件裡

最後，當我們最後在 HTML 的程式碼中使用元件，我們就可以把元件的 props 名稱，當成 HTML 的屬性使用。

在 @event、:class 等 Vue 指令當中，我們都是使用 v-指令 =" " 把特定的值傳輸到 HTML 裡。括號裡面的值，則是對應到資料或是方法的名稱。像是，如果我們想要顯示一筆資料中的字串，我們只要在 HTML 中寫上：

<p v-text="dataName"></p>

props 也是一樣的使用方式：

<photo :img-url="dataName"></photo>

** Vue 透過 props 名稱建立一個 HTML 屬性 **

(或許你會發現，Vue 最後在 HTML 使用上，通常都是透過 HTML 的屬性做綁定，像是，@event、:class、v-for、v-if 等等。雖然要記的步驟好像很多，但是先把握住這個原則，或許會對自己掌握 Vue 的實際使用會有些幫助。)

這邊使用的是根元件(也就是透過 new Vue() 建立起來的那個龐大物件)裡的 data 名稱。透過這樣的方法，我們就成功地把母/根元件的 data 傳到子元件裡面。

如果我們透過開發者工具查看元件的 props 屬性，就會有對應到的母/根元件資料內容。

動態與靜態

在上述的例子中，我們使用的是動態的傳遞方式。如果沒有冒號，只有 img-url，就屬靜態的傳遞方式，必須手動地把資料的內容貼在等號裡面。

** 母元件(parent component)不一定是根元件