欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 创建公共组件并引用

程序员文章站 2022-05-25 19:51:03
...

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

主要的难点:数据传递

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

  • 引用的部分:
<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"
        },
    ]
}