vue全局组件与局部组件的区别与用法案例

打不死的IT小强

已于 2023-07-21 14:36:20 修改

阅读量1.8k

点赞数

文章标签：前端 vue

于 2023-07-21 14:34:29 首次发布

本文链接：https://blog.csdn.net/hubeilihao/article/details/131851191

版权

1. 全局组件

全局组件是在Vue应用的根实例中注册的组件，这意味着它们可以在整个应用的任何地方使用，包括其他组件的模板中。全局组件通常用于在整个应用中共享的通用组件，例如导航栏、页脚或弹窗。

1.1 全局组件的注册

// main.js
import Vue from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';

Vue.component('my-global-component', MyGlobalComponent);

new Vue({
  render: h => h(App)
}).$mount('#app');

1.2 全局组件的使用

<!-- 在任何组件的模板中可以直接使用全局组件 -->
<template>
  <div>
    <my-global-component />
  </div>
</template>

2. 局部组件

局部组件是在另一个组件的模板中注册的组件，这意味着它们只能在包含它们的组件及其子组件中使用。局部组件通常用于封装和组织相关的功能模块，使得组件更具可重用性和独立性。

2.1 局部组件的注册与使用

<template>
  <div>
    <!-- 在组件的模板中注册并使用局部组件 -->
    <my-local-component />
  </div>
</template>

<script>
import MyLocalComponent from './MyLocalComponent.vue';

export default {
  components: {
    'my-local-component': MyLocalComponent
  }
};
</script>

3. 用法案例

3.1 全局组件用法案例

假设我们有一个网站，所有页面都需要显示一个通用的页脚。我们可以创建一个全局组件来表示这个页脚，并在整个应用的每个页面中使用它。

写一个页脚的vue

<!-- MyGlobalFooter.vue -->
<template>
  <footer>
    <p>© 2023 My Website. All rights reserved.</p>
  </footer>
</template>

<script>
export default {
  // 组件的逻辑和数据
};
</script>

<style>
/* 组件的样式 */
footer {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

使用Vue.component()注册为全局组件

<!-- main.js -->
import Vue from 'vue';
import App from './App.vue';
import MyGlobalFooter from './components/MyGlobalFooter.vue';

Vue.component('my-global-footer', MyGlobalFooter);

new Vue({
  render: h => h(App)
}).$mount('#app');

接下来，我们可以在整个应用的任何地方使用它：

<!-- Home.vue -->
<template>
  <div>
    <!-- 在任何组件的模板中可以直接使用全局组件 -->
    <my-global-footer />
  </div>
</template>

3.2 局部组件用法案例

假设我们有一个产品列表页，需要在页面中显示产品列表。我们可以创建一个局部组件来表示单个产品项，并在产品列表组件中使用它。

<!-- ProductListItem.vue -->
<template>
  <div class="product-item">
    <img :src="product.imageUrl" alt="Product Image" />
    <h3>{{ product.name }}</h3>
    <p>{{ product.price }}</p>
  </div>
</template>

<script>
export default {
  // 组件的逻辑和数据
  props: ['product'],
};
</script>

<style>
/* 组件的样式 */
.product-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.product-item img {
  width: 100%;
  height: auto;
}
</style>

<!-- ProductList.vue -->
<template>
  <div>
    <h2>产品列表</h2>
    <div v-for="product in products" :key="product.id">
      <!-- 在组件的模板中注册并使用局部组件 -->
      <product-list-item :product="product" />
    </div>
  </div>
</template>

<script>
import ProductListItem from './ProductListItem.vue';

export default {
  // 组件的逻辑和数据
  components: {
    'product-list-item': ProductListItem
  },
  data() {
    return {
      products: [
        {
          id: 1,
          name: 'Product A',
          price: '$50',
          imageUrl: 'product-a.jpg'
        },
        {
          id: 2,
          name: 'Product B',
          price: '$40',
          imageUrl: 'product-b.jpg'
        },
        // 更多产品...
      ]
    };
  },
};
</script>