目的
在写页面时,经常会有些共用的标题,这时我们可以把它写成一个组件,当标题的内容修改时,其它内容也会修改。
实现
- 组件内容
首先写一个标题组件,命名为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>
- 效果