vue3引入compnoent

在Vue3中，引入组件的方式与Vue2有所不同。下面是引入组件的步骤：

1. 创建一个组件

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

2. 在父组件中引入子组件

可以通过以下方式引入子组件：

import MyComponent from './MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  data() {
    return {
      title: 'Hello',
      content: 'World'
    }
  }
}

3. 在父组件中使用子组件

在父组件中，可以通过以下方式使用子组件：

<template>
  <div>
    <my-component :title="title" :content="content"></my-component>
  </div>
</template>

在这个例子中，我们使用了子组件的名称`<my-component>`，并传递了两个属性`title`和`content`。

总结：

在Vue3中，我们可以通过`import`语句来引入组件，然后通过`components`选项在父组件中注册子组件。在父组件中使用子组件时，我们可以直接使用子组件的名称，并传递需要的属性。