前言
感觉自己基础知识不是很扎实，在项目中好好学习。记录一下。
vue其中比较一个好用的就是一个页面中内容过多。为了更好的操作以及管理代码。可以将一个页面分成好几个部分，最后整合到一个一起。
例如：
京东这个页面，其实可以分成好几个部分，例如a可以单独一个组件，（单独一个vue文件），最后放到一个页面里面。那么大的页面就是父组件，而单独一个的小模块最后放到父组件里，那么这个就是子组件。
那么怎么做呢？
我们首先将a正常的页面写到一个文件里面。假如命名为jingdong-a.vue
大的页面为jingdong.vue
那我们怎么把a的内容放到jingdong.vue里面呢？
1、在a页面的script的export default {里面命名name：JingdongA 这个name是为了在父组件中引入使用
2、在父组件中引入。script里 import JingdongA from "路径";我们要在
export default {
components: { CtUser },
}
components就是组件的意思
Vue中使用components的使用技巧_vue弹窗位置 a组件引入b,弹窗在a组件上展示-CSDN博客
3、在想要展现的地方写上标签名就好啦！ <jingdong-a></jingdong-a>
式例：
//父组件
<template>
<u--form>
<ct-user :userType="userType"></ct-user>
</u--form>
</template>
<script>
import CtUser from "@/components/ct-user/ct-user.vue";
export default {
components: { CtUser },
mixins: [lifecycleMixin],
data() {
return {
}
},
methods: {
};
</script>
<style lang="scss">
</style>
//子组件
<template>
<div>
<u-form-item label="责任人" prop="taskInfo.dutyUser" borderBottom ref="item1">
<navigator url="/pages/deptPage/deptPage?userType=duty">请选择责任人</navigator>
<u--text></u--text>
</u-form-item>
<u-form-item label="参与人" prop="taskInfo.participationUser" borderBottom ref="item1">
<navigator url="/pages/deptPage/deptPage?userType=participation">请选择参与人</navigator>
</u-form-item>
<u-form-item label="审批人" prop="taskInfo.ratifyUser" borderBottom ref="item1">
<navigator url="/pages/deptPage/deptPage?userType=ratify">请选择审批人</navigator>
</u-form-item>
<u-form-item label="抄送人" prop="taskInfo.sendUser" borderBottom ref="item1">
<navigator url="/pages/deptPage/deptPage?userType=send">请选择抄送人</navigator>
</u-form-item>
</div>
</template>
<script>
export default {
name: "CtUser",
props: {
parentMessage: String,
// dataId: {
// type: String,
// default: "ct-user",
// },
},
data() {
return {};
},
methods: {},
};
</script>
<style></style>
