components

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-31 13:30:53

1520 瀏覽

菜菜菜的 Vue 30天 - Day16

component

我覺得在 Vue 裡 component 是一個非常重要的一個部分，使用 component 能夠將網頁的內容封裝起來，提高程式碼複用性。

可以想像一下很久以前的網頁建立必須每一頁都是獨立的檔案，甚至每一支獨立的檔案內都有很多重複性很高的元素及內容，現在有了 SPA 的框架就能夠使用一個個的 component 組建成完整的網頁。

概念如下：

註冊

那 component 註冊的部份同樣也是分為 全域及區域 2 種。

全域

全域的部分我們一樣直接使用 Vue 實例來做註冊

Vue.component('button-add-count', {
  data: function () {         //component 內一樣能夠使用 data、methods 以及後面會介紹的 lifecycle
    return {
      count: 0
    }
  },
  template: '<button @click="count++">Clicked {{ count }} times.</button>'     //component 內所要使用的 DOM
})

區域

區域的部分是能夠直接在 Vue 實例內使用 components 來做註冊

<script>
  const vm = new Vue({
    el: '#app',
    components: {
      data: function() {
        return {
          count: 0
        }
      },
      'button-add-count': {
        template: '<button @click="count++">Clicked {{ count }} times.</button>'
      }
    }
  })
</script>

使用

上面介紹了如何去註冊 component，接下來就是如何去使用了。

其實使用方式很簡單，我們只要註冊了 component 之後呢就可以像添加 HTML Tags 一樣的直接新增 component。

<body>
  <div id="app">
    <button-add-count></button-add-count>
  </div>
</body>

這樣子它渲染出來的還是一個 button，甚至我們就能開始重複使用它

<body>
  <div id="app">
    <button-add-count></button-add-count>
    <button-add-count></button-add-count>
    <button-add-count></button-add-count>
  </div>
</body>

注意

這邊有一點要特別注意！！

我們註冊了一個 component 裡面如果使用到了 data 必須使用 function(){} 的格式，在官網有提到，使用 function(){} 的方式才不會影響到其他同樣 component 內的 data，如果使用 object 格式的話會早成其他同樣 component 一併被修改到。

我下面來看一下官方的範例