Vue公共组件调用，公共头部实现自定义内容

一、设置公共头部publicHeader.vue

<template>
	<view>
		<view v-if="sign==0" class="head">
			<view class="headText">测试1</view>
		</view>
		
		<view v-if="sign==1" class="head">
			<view class="headText">{{parent}}</view>
		</view>
		
		<view v-if="sign==2" class="head">
			<view class="headText">{{parent}}</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		props: ['sign', 'parent'],
		methods: {
			
		}
	}
</script>

<style>
	.head{
		width: 100vw;
		height: 64px; 
		background: #F00;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
	}
	.headText{
		height: 44px;
		line-height: 44px;
		color: #FFFFFF;
		text-align: center;
	}
</style>

二、设置公共组件publiContent.vue

<template>
	<view>
		<view class="content">
			<view>测试内容</view>
			<view>这是一个测试来自publiContent.vue</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style>
	.content{
		text-align: center;
		line-height: 40px;
		
	}
</style>

三、公共头部、公共组件的调用

<template>
	<view style="height:93vh;overflow-y: scroll;background: #FFFFFF;">
		<!-- 一级菜单头头部调用 sign与publicHeader里sign对应，改变sign值可改变头部样式内容 -->
		<view style="height: 64px;">
			<publicHeaderDiv :sign='1' :parent='headTitles'></publicHeaderDiv>
		</view>
		
		<view style="text-align: center;line-height: 35px;">测试江南嘉捷军</view>
		
		<!-- 调用公共组件 -->
		<view>
			<publiContentDiv></publiContentDiv>
		</view>
	</view>
</template>

<script>
	import publicHeaderDiv from '@/pages/common/publicHeader'//引入
	import publiContentDiv from '@/pages/common/publiContent'
	export default {
		data() {
			return {
				headTitles:'测试江南嘉捷军头部',//头部内容
			}
		},
		onLoad() {
			
		},
		components: {
			publicHeaderDiv,publiContentDiv
		},
		methods: {
			
		}
	}
</script>

<style>
</style>