iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

我的Vue學習筆記系列 第 7

Day08-元件特性

元件是Vue最強大的功能之一,可以將重複的程式碼封裝,提高效率和維護性。

元件組織

把網頁分成區塊,區塊內還可以在分區塊,每個區塊都有各自的模板、樣式,與行為邏輯,把其中一個拿掉,期他的區塊也不會因此而壞掉。

元件註冊與宣告

首先,賦予他一個名稱,名稱有兩種寫法

  • kebab-case連字號
  • pascalCase駝峰式

HTML標籤沒有大小寫的區分,所以用駝峰式註冊元件時,在HTML模板呼叫時要改用連字號寫法

Vue.component('my-component', { /* ... */ })
Vue.component('MyComponent', { /* ... */ })
<my-component></my-component>
<my-component></my-component>

再來,就是元件的位置,元件也有全域和區域之分

  1. 全域元件
<my-component></my-component>
const app = Vue.createApp({
})
app.component('my-component', {
    template: `<h3>Hello Vue</h3>`,
    data() {

    }
})
app.mount('#app');
  1. 區域元件

在實體上加上components屬性,區域元件就可以在裡面定義

const app = Vue.createApp({
    components: {
        'my-component': {
            template: `<h3>Hello Vue</h3>`
        }
    }
})
  1. 補充: import元件

支援import方式引入

import myComponent from './conponents/my-component.js'
const app = Vue.createApp({
    components: {
       myComponent
    }
})

網頁區塊封裝成元件模板

template內容愈來愈多的時候,可以利用x-template來打包成易閱讀的模板,template只需要寫上ID就能執行。

<script type="text/x-template" id="card">
    <tr>
        <td>{{ person.name }}</td>
        <td>{{ person.cash }}</td>
        <td>{{ person.icash }}</td>
      </tr>
</script>
app.component('card', {
    template: `#card`,
})

子元件的 data 必須是函數

JS是透過reference方式傳遞資料,若沒有透過function回傳一個新物件,那麼子元件的data就會共用,在點擊click按鈕時四個元件內的data都會加1。

<card></card>
<card></card>
<card></card>
<card></card>

<script type="text/x-template" id="card-component">
   <div class="card">
      <div v-model="count">
        count:{{count}}
      </div>
     <button @click="count++">click</button>
  </div>
</script>
const app = Vue.createApp({
})
const $data = {
    count: 0
}
app.component('card', {
    data() {
        return $data
    },
    template: '#card-component',
})
app.mount('#app');

改成這樣的方式就可以個別的觸發加一事件

app.component('card', {
    data() {
        return {
            count: 0
        }
    },
    template: '#card-component',
})

若要個別清除資料回到初始值可以使用Object.assign和this.$options.data()data資料回到0

app.component('card', {
    data() {
        return {
            count: 0
        }
    },
    template: '#card-component',
    methods: {
        resetData() {
            Object.assign(this.$data, this.$options.data());
        }
    }
})

參考資料

為什麼要用Vue.js的元件化開發
https://iter01.com/78286.html


上一篇
Day06-條件判斷與列表渲染
下一篇
Day07-生命週期
系列文
我的Vue學習筆記30

尚未有邦友留言

立即登入留言