Vue父组件和全局组件和局部组件代码

Vue.js 中，组件分为三种类型：父组件、全局组件和局部组件。

1. **父组件（Parent Component）**：通常是一个包含其他子组件的模块，它通过`<template>`标签嵌套或`<component>`指令引用其他组件。父组件可以管理子组件的状态，并通过`props`属性向子组件传递数据。例如：

<template>
  <div>
    <h1>父组件</h1>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    }
  }
}
</script>

2. **全局组件（Global Component）**：在整个应用生命周期内可用，无需每次导入到每个父组件中。通常在`main.js`或`App.vue`中定义。注册全局组件示例：

import GlobalComponent from './components/GlobalComponent.vue'

// 在 main.js 或 App.vue 的 setup 函数中注册
Vue.component('global-component', GlobalComponent)

然后在模板中直接使用：

<global-component></global-component>

3. **局部组件（Local Component）**：仅在当前文件或特定范围内使用的组件。它们不会自动被其他部分的组件实例化。局部组件示例与上面类似，只是在需要的地方导入和使用。

import LocalComponent from './components/LocalComponent.vue'

// 在需要该组件的文件中导入并使用
<local-component :data="localData" />