Purpose
When writing a page, there are often some common titles. At this time, we can write it as a component. When the content of the title is modified, other content will also be modified.
accomplish
- Component content
First write a title component, named title, and the path is @/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 component
Introduce this component in the required file
import titleName from "@/components/titleName.vue";
export default {
components: {
titleName
},
<!--其它内容省略-->
}
- Components can be used
after importing components
<titleName></titleName>
- Effect
