两周掌握Vue3（三）：全局组件、局部组件、Props

代码仓库：跳转
本博客对应分支：03

一、全局组件

Vue 3 中的全局组件是在应用程序中全局注册的组件，可以在任何地方使用，而不需要在每个组件中都单独注册。

1.创建全局组件

在components目录下创建全局组件MyGlobalComponent.vue：

<!-- components/MyGlobalComponent.vue -->
<template><div>This is my global component</div>
</template><script>
export default {name: 'MyGlobalComponent'
};
</script>

2.在main.js中注册全局组件

import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);// 注册全局组件
import MyGlobalComponent from './components/MyGlobalComponent.vue';
app.component('MyGlobalComponent', MyGlobalComponent);app.mount('#app');

3.使用全局组件

在App.vue中尝试使用我们定义和注册的全局组件：

<!-- App.vue -->
<template><div id="app"><!-- 使用全局组件 --><MyGlobalComponent ></MyGlobalComponent><HelloWorld /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld}
};
</script>

• 效果：

二、局部组件

在 Vue 3 中，局部组件是指在单个组件内部注册和使用的组件。这意味着局部组件只能在其父组件内部使用，而无法在其他组件中直接使用。要在 Vue 3 中创建一个局部组件，可以在父组件的 components 选项中注册它，然后在父组件的模板中使用它。

1.创建局部组件

在components目录下创建局部组件MyLocalComponent.vue：

<!-- components/MyLocalComponent.vue -->
<template><div><h2>这是局部组件</h2><p>我只能在父组件内部使用</p></div>
</template><script>
export default {name: 'MyLocalComponent'
};
</script>

2.在另一个组件中注册、使用局部组件

<!-- App.vue -->
<template><div id="app"><!-- 使用全局组件 --><MyGlobalComponent></MyGlobalComponent><!-- 使用局部组件 --><MyLocalComponent></MyLocalComponent><HelloWorld /></div>
</template><script>
// 引入并注册局部组件
import HelloWorld from './components/HelloWorld.vue';
import MyLocalComponent from './components/MyLocalComponent.vue';export default {name: 'App',components: {HelloWorld,MyLocalComponent}
};
</script>

• 效果：

三、Props

在 Vue 3 中，props 是用于从父组件向子组件传递数据的机制。通过 props，父组件可以向子组件传递数据，子组件可以接收并使用这些数据。

1.定义一个子组件

在components目录下创建一个子组件ChildComponent.vue：

我们定义了一个名为 message 的 prop，并使用了 props 的验证功能。我们指定了它的类型为 String，并且设置为必需的（required: true）。这意味着父组件在使用 ChildComponent 时必须传递一个名为 message 的字符串类型的数据。

<!-- ChildComponent.vue -->
<template><div><h2>子组件</h2><p>{{ message }}</p></div></template><script>export default {props: {message: {type: String,required: true}}};</script>

2.定义一个父组件

在components目录下创建一个子组件ParentComponent.vue：

在父组件中，我们使用了 v-bind 或者简写的 : 语法将 parentMessage 数据传递给了 ChildComponent 的 message prop。这样，parentMessage 的值就会被传递到 ChildComponent 中，并在子组件中使用。

<!-- ParentComponent.vue -->
<template><div><h1>父组件</h1><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: '这是来自父组件的消息'};}
};
</script>

3.效果

为了便于在页面上展示，我们在App.vue中注册ParentComponent为局部组件：

<!-- App.vue -->
<template><div id="app"><!-- 使用全局组件 --><MyGlobalComponent></MyGlobalComponent><!-- 使用局部组件 --><MyLocalComponent></MyLocalComponent><HelloWorld /><ParentComponent></ParentComponent></div>
</template><script>
// 引入并注册局部组件
import HelloWorld from './components/HelloWorld.vue';
import MyLocalComponent from './components/MyLocalComponent.vue';
import ParentComponent from './components/ParentComponent.vue';export default {name: 'App',components: {HelloWorld,MyLocalComponent,ParentComponent}
};
</script>

• 效果：