写一篇父子组件之间的传值来记录下,怕以后会忘记
template中
在这里插入代码片
methods中,这是跳转到另一个子页面去,括号内的是参数,name是要跳的页面的路由path,父子组件需要放在一个文件夹下哦,如果不在的话,就要在子组件页面引入父组件,params是传参的名字
methods{
goDesign (item, status) {
this.$router.push({ name: 'processDdesign2', params: { type: status, data: item || '', companyId: this.companyId } })
},
}
这是第一种,直接跳转到子页面的只需要$router.push()到指定的页面就好了
然后子组件接收参数即可
子组件页面的。。。
mounted 中
mounted () {
// 获取从上个页面带过来的参数
this.companyId = this.$route.params.companyId
},
比如我在子组件进行操作了
methods {
addWorkFlow (bpmn) {
let that = this;
that.$refs['workFlow'].validate(valid => {
if (valid) {
that.axios.post('xx/xx/', {
companyId: that.companyId
}).then(res => {
if (res.code === '0') {
that.$message.success('添加成功');
that.$router.push({name: 'processManagement', params: { operate: 'success'}})
}
})
}
})
},
}
在操作成功之后呢,我又要跳到父组件中去更新下父组件的查询接口啊,因为我往里面加了、删除了,修改了数据,我要更新下啊that.$router.push({name: ‘processManagement’, params: { operate: ‘success’}})跳到这个页面去,更给了一个状态值
那么在父组件中接收
// 操作成功刷新列表
activated() {
if (this.$route.params.operate && this.$route.params.operate === 'success') {
this.doSearch();
}
},
methods {
this.doSearch();
}
第二种就不是跳转的啦。。。。就是直接在父组件上面添加子组件代码
template中
<processDdesign3
class="itemProcess"
v-if="childProcessShow" // 控制什么时候被看到,其实子组件一直在父组件上面,只是先被隐藏掉,后面才能看到的
:type="itemOperate" // 传什么参数过去 type,子组件接收名,itemOperate是data中的
:data="itemData"
@childPro="childProcessThen" // 把父组件哪个方法传过去,childPro,子组件接收名,childProcessThen父组件中某个方法,等会子组件操作成功后会刷新父组件的
></processDdesign3>
引入的子组件名字就叫processDdesign3,所以直接写这个名字就好了
2.还有一种
<div is="processDdesign3" v-if="childProcessShow" :type="itemOperate" data="itemData" @childPro="childProcessThen></div>
这把子组件写在一个div里面,is放的就是子组件名字,规范一点
``
父组件script中
要引入子组件
```javascript
<script>
import processDdesign3 from './processDdesign3.vue'
export default {
name: 'workFlow', // 父组件页面名字,路由里的path
components: {
processDdesign3: processDdesign3 把子组件挂在父组件上,第一个processDdesign3是上面子组件的名称,第二个processDdesign3是important引入的子组件,如果两个是一样的可以省略一个
比如: processDdesign3就写一个就行
如果有多个子组件的情况下用逗号隔开,
比如:
processDdesign2, //这是另一个子组件的
processDdesign3
},
}
</script>
父组件任务已经完成了,子组件只负责接收数据就好了
子组件里
<script>
export default {
props: {
type: {
type: String,
default: ''
},
data: {
type: Object,
default: () => {}
},
companyId: {
type: String,
default: ''
}
}, // 方法不用写上去,这是接收参数的地方,这里接收到的参数无需在data中再定义了,否则就重复啦
data () {
// 空的啦
}
}
</script>
子组件接收父组件传过来的参数有两种方法
第一种是props是对象形式,就是上面两种,还有一种是数组形式
1.对象形式,需要申明每个参数是某种类型
props: {
type: {
type: String,
default: ''
},// 字符串表示方法
data: {
type: Object,
default: () => {}
},
data: Object, // data对象也可以这么表示,与上面这个data是一样的
companyId: {
type: String,
default: ''
}
},
2.数组的形式,无需声明参数是什么类型的,用逗号隔开
props: [type, data, companyId], 即可
在子组件里面做了操作啦,我就要刷新父组件啦
close (str, process) {
// childPro父组件接收名字, 后面的就是这个父组件方法接收的参数 'close', ''
this.$emit('childPro', 'close', '');
},
完成
下面来个完整例子
父组件中
template中
<template>
<div>
<el-button icon="el-icon-plus" type="primary" size="small" @click="openEditWindow()">新增</el-button>
// 点击新增按钮时弹出一个弹出框
<div is="alertdriverMaintenance" :showFlag="showFlag" :Params="Params" @doSearch="doSearch"></div>
</div>
</template>
script中
<script>
import alertdriverMaintenance from './alertdriverMaintenance'
export default {
name: 'driverMaintenance', // 父组件名称
components: {alertdriverMaintenance}, // 挂载子组件
data () {
showFlag: false, // 控制子组件显示与隐藏的
Params: {}, // 传的参数
},
methods {
openEditWindow: function (row) {
this.showFlag = !this.showFlag
this.Params = row || null
},
doSearch (val) {
// 获取父组件数据的
}
}
}
</script>
子组件中
template中
<template>
<div>
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="1050px">
<div slot="title" class="dialog-footer">
<i class="el-icon-edit-outline"></i>
<span>{{formTypeDsc}}</span>
</div>
<div>
<el-form ref="form" label-width="100px" size="mini" :rules="form" :model="formData">
<el-col :span="8" class="tb-row">
<el-form-item label="姓名" prop="driverCode">
<el-select v-model="formData.driverCode" :disabled="disabled" style="width:100%;" filterable clearable @change="carChange">
<el-option
v-for="item in carnoList"
:key="item.userCode"
:label="item.userName + '-' + item.userCode"
:value="item.userCode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="medium" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" size="medium" @click="addNew" :loading="loadingBtn">确定</el-button>
</span>
</el-dialog>
</div>
</template>
script中
<script>
export default {
props: ['showFlag', 'Params'],
data () {},
watch: {
showFlag (arg) {
let _this = this;
_this.dialogVisible = true;
if (_this.Params !== null) {
// 如果_this.Params不为空有内容证明我点击了按钮,打开了子组件弹框,这时我就在这里面进行打开子组件弹框的操作,就是这个弹框打开了我要干什么啊
} else {
// 这里就是弹框关闭的时候我要干什么啊
}
}
},
methods: {
setData () {
// 刷新父组件
this.$emit('doSearch', 'close');
}
}
}
</script>
这个弹框下面的就是父组件,这个小弹框就是子组件,每当这个弹框出现的时候就证明子组件被调用了
完事咯