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"
},
]
}
上一篇: Flutter与原生通信