vue自定义component组件

最新推荐文章于 2025-03-02 15:55:06 发布

zttbee

最新推荐文章于 2025-03-02 15:55:06 发布

阅读量841

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_43840793/article/details/125368199

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现组件化，通过创建一个名为`titleName`的标题组件，实现了页面共用标题的复用。当需要修改标题内容时，只需在组件内修改一处，即可全局生效。组件包含一个顶部导航结构，其中包含了标题文字‘综合农事服务中心’。在需要使用该组件的页面中，通过导入并注册组件，然后简单插入`<titleName></titleName>`即可完成标题的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的

在写页面时，经常会有些共用的标题，这时我们可以把它写成一个组件，当标题的内容修改时，其它内容也会修改。

实现

组件内容
首先写一个标题组件，命名为title,路径为@/components/titleName.vue

<template>
	<div id="mainwrapper">
		<!--顶端导航，内容可自定义-->
		<div class="flex headTop">
			<div class="dflex-01"></div>
			<div class="dflex-05">
				<div class="flexCenter">
					<!--标题-->
					<div class="widthTitle">
						<div class="flexCenter">
							<div class="flex">
								<div class="dom width3"></div>
								<div class="dom width5"></div>
								<div class="dom width10"></div>
							</div>

							<div class="titleRight">综合农事服务中心</div>
							<div class="flex">
								<div class="dom width10"></div>
								<div class="dom width5"></div>
								<div class="dom width3"></div>
							</div>
						</div>

					</div>

				</div>

			</div>
			<div class="dflex-01">

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "titleName",
		data() {
			return {

			};
		},
		mounted() {},
		methods: {

		}
	};
</script>
<style scoped>
</style>

引入组件
在需要的文件中引入这个组件

import titleName from "@/components/titleName.vue";
	export default {
		components: {
		  titleName
		},
		<!--其它内容省略-->
	}

使用组件
引入组件后即可使用组件

<titleName></titleName>

效果