vue 创建公共组件并引用

创建一个公共组件，然后提供给别的组件引用

主要的难点：数据传递

实践了一个简单的，上代码看注释

• 引用的部分：

<template>
    <div>
      <Modal v-model="showStatus" title="订正记录">
        <!-- 引用Correction组件 可以当做标签使用，传入数据info 类似于标签的自有属性（对应Correction组件中的props变量） 参考文档：https://cn.vuejs.org/v2/guide/components-props.html -->
        <Correction :info="data.info"></Correction>      
      </Modal>
    </div>
</template>

<script>
// 引入组件
import Correction from './components/Correction'
export default {
  // 类似组件声明，即可以直接用这个字符当做标签
  components: {
    Correction
  },
  data () {
    return {
        data: '',
        showStatus: false
        }
    },
  methods: {
    getCorrectList () {
      this.showStatus = true
    }
  }
}

• 组件的部分

<template>
  <div>
    <div>
      <Table
        stripe
        style="margin-top: 20px;"
        :columns="columnsName"
        :data="info.list"
      >
      </Table>
    </div>
  </div>
</template>
<script>
export default {
  // 组件的属性，可以用来参数传递
  props: {
    info: Object
  },
  data () {
    return {
      columnsName: [
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '手机号码',
          key: 'phone',
          align: 'center'
        }
      ]
    }
  }
}
</script>

• data的数据格式：

data: {
    list: [
        {
            name: "A",
            phone: "20238422014"
        },
        {
            name: "B",
            phone: "2328372223"
        },
    ]
}

 

来源：CSDN

作者：所爱隔山海海

链接：https://blog.csdn.net/m0_37684037/article/details/104799656