vue自定义component组件

目的

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

实现

• 组件内容
  首先写一个标题组件，命名为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>

• 效果