Vue3 组件学习笔记

什么是组件？

在Vue应用程序中，组件是可复用的代码模块，它将模板、脚本和样式集成到一个独立的、可重复使用的单元中。组件可以被多次使用，在不同的上下文中实例化，从而实现代码复用和快速开发的效果。

如何定义组件？

在Vue3中，需要使用defineComponent()函数来定义组件。下面是一个简单的示例：

javascriptCopy Code
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  props: {
    msg: String
  },
  setup(props) {
    return {
      count: 0
    }
  },
  template: `
    <div>
      <p>{{msg}}</p>
      <button @click="count++">点击我：{{count}}</button>
    </div>
  `
})

组件由以下几个部分组成：

• name：组件名称，可以是字符串或 Symbol 类型；
• props：组件接收的属性，类型为对象，其中每个属性表示一个 prop。每个 prop 可以有自己的类型、默认值、验证函数等；
• setup：组件的数据和逻辑，类型为一个返回对象的函数。返回对象中包含了该组件的所有状态和方法；
• template：组件的模板，可以是一个字符串模板或者通过 <template> 标签来定义。

如何使用组件？

在Vue3中，通过在模板中使用组件的标签名来使用它。例如：

htmlCopy Code
<template>
  <div>
    <my-component msg="Hello World"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

在上面的示例中，通过import语句将MyComponent组件引入到当前文件中，并在components选项中注册为my-component标签。然后在模板中就可以使用<my-component>标签来渲染该组件。

实例

下面展示一个简单的组件实例，它是一个计数器组件，每次点击按钮都会将计数器加一。

javascriptCopy Code
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Counter',
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const count = ref(props.initialCount)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  },
  template: `
    <div>
      <p>计数器：{{count}}</p>
      <button @click="increment">点击我</button>
    </div>
  `
})

该组件有一个名为 initialCount 的 prop，用于初始化计数器的值。它通过 setup 函数中返回的 count 和 increment 两个变量提供计数器和点击事件。最后，组件的模板将这两个变量展示出来，完成了计数器组件的展示。

在使用该组件时，通过绑定 initialCount 属性来初始化计数器的值。例如，要创建一个初始值为 10 的计数器组件：

htmlCopy Code
<template>
  <div>
    <counter :initial-count="10"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  components: {
    'counter': Counter
  }
}
</script>

以上就是一个简单的 Vue3 组件学习笔记及实例。