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>