[JavaScript知识库]vue公共组件封装

1.在确保电脑安装了node的条件下，可用node -v来检测是否电脑有安装node

2.通过vue-create 【项目名】创建一个vue项目

3.创建一个component里面的文件，在home页面去引用他，子组件封装

<template>
  <div class="content">
    <div class="head">
      <img :src="person.imgUrl" alt="" />
      <span>{{ person.name }}</span>
    </div>
    <div class="bod">
      <p v-for="(item,index) in data" :key="index">
        <span>{{Object.values(item)[0]}}</span>
        <span>{{Object.values(item)[1]}}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    person: {
      type: Object,
      required: false,
      default: () => {}
    },
    // data
    data: {
      type: Array,
      required: false,
      default: () => [] 
    }
  },
  data () {
    return {
    }
  },

  components: {},

  methods: {}
}
</script>

<style lang="scss">
.content {
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  padding-top: 20px;
  .head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: solid rgb(243, 243, 236) 1px;
    padding-bottom: 10px;
    img{
      width: 40px;
      height: 40px;
      margin-right: 20px;
      text-align: start;
      align-content: flex-start;
      border-radius: 20px;
      margin-left: 10px;
    }
  }
  .bod {
    padding:  0 10px 20px;
    p {
      display: flex;
      justify-content: flex-start;
      span:nth-child(1) {
        margin-right: 20px;
      }
    }
  }
}
</style>

4.父组件引用

<template>
  <div class='about'>
    <CommonComponent
      :person = person
      :data = arr
    />
  </div>
</template>
<script>
import CommonComponent from '../components/hujunyan.vue'
export default {
  data () {
    return {
      arr:[
        {
          name: "卡种",
          value: "京东卡"
        },
        {
          name: "分期类型",
          value: "容易分期"
        },
        {
          name: "分期金额",
          value: "5000元"
        }
      ],
      person: {
        imgUrl: "https://upload.jianshu.io/users/upload_avatars/21646748/3fc84610-2d20-49b8-8f9e-01de188a8de2?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
        name: "胡俊彦"
      }

    }
  },

  components: {
    CommonComponent
  },

  methods: {}
}
</script>

5.实现效果