vue3组件引入以及使用

Vue3中的组件引入和使用与Vue2基本相同，只是在语法上有些许变化。

1. 引入组件

在Vue3中，可以使用`defineComponent`函数定义一个组件，然后使用`export default`将其导出，以便在其他地方引入和使用。

例如，我们定义一个HelloWorld组件：

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props, { emit }) {
    const handleClick = () => {
      emit('click')
    }
    return () => (
      <div onClick={handleClick}>
        <span>{props.msg}</span>
      </div>
    )
  }
})

这个组件可以接收一个名为`msg`的属性，并在被点击时触发一个`click`事件。

2. 使用组件

在需要使用该组件的地方，可以使用`import`语句引入组件，然后在`components`选项中注册它。

例如，在App.vue中使用HelloWorld组件：

<template>
  <div>
    <HelloWorld msg="Welcome to Your Vue.js App" @click="handleClick" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    handleClick() {
      console.log('HelloWorld clicked')
    }
  }
}
</script>

在模板中，我们可以像使用普通HTML标签一样使用HelloWorld组件，并传递一个`msg`属性和一个`click`事件处理函数。

3. 全局注册组件

在Vue3中，可以使用`createApp`函数创建一个应用实例，并在该实例的`component`方法中全局注册组件。

例如，在main.js中全局注册HelloWorld组件：

import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp(App)

app.component('HelloWorld', HelloWorld)

app.mount('#app')

在这里，我们使用`createApp`函数创建一个应用实例，并使用`component`方法全局注册HelloWorld组件。然后，我们将应用实例挂载到`#app`元素上。

全局注册组件后，我们就可以在任何地方使用该组件了，而不需要每次都在`components`选项中注册它。