Vue 3 Component詳解

一、Vue 3 Component簡介

Vue 3 Component是Vue.js 3的核心概念之一，通過Component，我們可以把複雜的UI組件拆分成小的、可復用的部分。Vue 3 Component的設計讓我們可以更好地管理整個應用程序的狀態，並且組件化的設計也能更好地提高我們的代碼復用性、可維護性。

二、Vue 3 Component的定義

在Vue 3中，我們可以用Vue.component()方法定義一個組件。這個方法接收2個參數：組件名字和一個配置對象。

Vue.component('my-component', {
  // 配置對象
});

在配置對象中可以定義組件的屬性和方法，如下：

Vue.component('my-component', {
  props: ['myProp'],
  data() {
    return {
      myData: 'Hello World!'
    }
  },
  methods: {
    myMethod() {
      console.log('Hello Vue!')
    }
  }
});

上面的代碼中，props定義了組件的屬性，data定義了組件的狀態，methods定義了組件的方法。

三、Vue 3 Component的使用

要在Vue 3應用程序中使用組件，我們需要把組件加入到父組件中。這樣Vue.js就能自動添加和更新子組件。下面是一個使用my-component組件的例子：

<div id="app">
  <my-component :myProp="myProp"></my-component>
</div>

在上面的代碼中，:myProp=”myProp”是向my-component傳遞屬性的語法。

然後我們可以通過應用程序實例中的components對象來註冊my-component組件：

const app = Vue.createApp({
  components: {
    'my-component': myComponent
  }
});

四、Vue 3 Component的生命周期函數

在Vue 3中，Component的生命周期函數被改名為setup()。

setup()函數是一個新的函數，它是在beforeCreate()和created()生命周期應用程序鉤子之前被調用的。

組件的生命周期示意圖：

五、Vue 3 Component的Props

Vue 3的Props可以通過props屬性來定義，如下：

const app = Vue.createApp({
  props: {
    myProp: {
      type: String,
      required: true
    }
  }
});

Props可以是一個對象，也可以是一個字元串數組。

六、Vue 3 Component的Slot

Vue 3的Slot可以通過slot標籤來使用，如下：

<div>
  <slot name="header"></slot>
  <slot></slot>
  <slot name="footer"></slot>
</div>

在上面的代碼中，name屬性是可選的。當我們不指定slot的name屬性時，它會被自動分配到默認的slot上。

七、Vue 3 Component的Ref

Vue 3的Ref可以通過ref屬性來使用，如下：

<div ref="myDiv"></div>

在上面的代碼中，我們創建了一個名稱為myDiv的Ref。

Ref的值可以是DOM元素或者組件實例，而我們可以通過this.$refs.myDiv來引用這個Ref。

八、Vue 3 Component的事件處理

Vue 3的事件處理可以通過@符號綁定事件，如下：

<template>
  <button @click="myMethod">Click Me</button>
</template>

九、Vue 3 Component的樣式綁定

Vue 3的樣式綁定可以通過:class和:style屬性來綁定，如下：

<template>
  <div :class="{ active: isActive }"></div>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>

十、Vue 3 Component的響應式更新

Vue 3的響應式更新可以通過reactivity API來實現。在Vue 3中，我們可以使用Vue.observable()方法來創建一個響應式對象。

const state = Vue.observable({
  count: 0
});

然後，我們可以在組件中使用這個state對象，如下：

const app = Vue.createApp({
  data() {
    return {
      state: state
    }
  },
  methods: {
    increment() {
      state.count++;
    }
  }
});

十一、Vue 3 Component的Composition API

Composition API是Vue 3中新的API，它提供了更好的代碼組織和復用。我們可以使用Vue.useComposition()方法來啟用這個新的API。

const app = Vue.createApp({
  setup() {
    const state = Vue.reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    }

    return {
      state,
      increment
    }
  }
});

在上面的代碼中，我們使用了Vue.reactive()方法來創建響應式對象。然後，返回的對象可以直接在template中使用。

十二、Vue 3 Component的代碼示例

下面是一個使用Vue 3 Component、Props、Slot、Ref、事件處理、響應式更新、Composition API的完整代碼示例：

<template>
  <div>
    <my-component ref="myComponent">
      <template #header>
        <h1>{{ title }}</h1>
      </template>
      <template>
        <p>{{ content }}</p>
        <button @click="increment">{{ state.count }}</button>
      </template>
    </my-component>
  </div>
</template>

<script>
const state = Vue.reactive({
  count: 0
});

const myComponent = Vue.defineComponent({
  props: {
    title: String,
    content: String
  },
  setup(props, { slots }) {
    const myDiv = Vue.ref(null);

    const increment = () => {
      state.count++;
    }

    Vue.onMounted(() => {
      console.log(myDiv.value);
    });

    return {
      myDiv,
      increment
    }
  }
});

const app = Vue.createApp({
  data() {
    return {
      state,
      title: 'Hello Vue!',
      content: 'This is my first Vue 3 Component!'
    }
  },
  components: {
    'my-component': myComponent
  },
  setup() {
    return {
      myProp: 'Hello Props!'
    }
  }
});

app.mount('#app');
</script>

<style>
.active {
  color: red;
}

div {
  font-size: 20px;
}
</style>