vue2 父组件引入子组件

前言

感觉自己基础知识不是很扎实，在项目中好好学习。记录一下。

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>