vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用
vue组件之间的通信1.this.$refs是一个对象,持有已注册过的所有子组件。ref为子组件指定一个名称,通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作(包括data中定义的数据和methods中定义的方法)2.this.$parent可以直接操作当前组件的父组件3.this.$root可以直接操作当前组件的所有祖先组件的根组件4.this.$children是一个
·
vue组件之间的通信
1.this.$refs
是一个对象,持有已注册过的所有子组件。
ref为子组件指定一个名称,通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作
(包括data中定义的数据和methods中定义的方法)
2.this.$parent
可以直接操作当前组件的父组件
3.this.$root
可以直接操作当前组件的所有祖先组件的根组件
4.this.$children
是一个数组,可以操作当前组件的所有子组件
例子
- this.$refs使用
父组件
<template>
<page-container>
<div>
<p-detail
model="detailVisible"
:visible="detailVisible"
:item="item"
ref="detailForm" // 1.在此处设置ref指定子组件名称
@cancel="closeDialog"
/>
</div>
</page-container>
</template>
<script>
import PDetail from "./detail";
export default {
name: "Appe",
components: {
PDetail,
},
data() {},
methods: {
getLabours() {
getDicts("bus_work_type", Cookie.get("currentProjectId")).then((res) => {
this.workTypes = res.data;
// 设置详情页面数据(子组件)
this.$refs["detailForm"].workTypes = res.data; // 2.在当前组件中为,子组件设置 workTypes的值
});
},
}
}
</script>
子组件
data() {
return {
// 赋值使用
fileHttpUrl: global.fileHttpUrl,
loading: false,
// 工种字典列表 ,通过父组件进行的赋值,
//存在问题,可能子组件先加载出来,而父组件的方法还没有执行完成,可能存在没值的情况,推荐使用this.$parent在子组件获取父组件中的值
workTypes: [],
// 详细进度字典列表
details: [],
form: {}
};
},
- this.$parent使用
父组件
// 合同类型字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.type);
},
// 状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status);
},
子组件
<template>
<el-dialog
title="合同详情"
:visible="visible"
width="700px"
center
append-to-body
@close="closeDialog"
>
<div v-loading="loading" class="dialog-container dialog-scroll-700">
<div class="dialog-detail__section">
<el-row>
<el-col :span="24">
<DescriptionsItem label="合同名称">
{{ form.contractName }}
</DescriptionsItem>
</el-col>
<el-col :span="24">
<DescriptionsItem label="合作单位">
{{ form.cooperator }}
</DescriptionsItem>
</el-col>
<el-col :span="12">
<DescriptionsItem label="合同类型">
{{ this.$parent.$parent.typeFormat(form) }}
</DescriptionsItem>
</el-col>
<el-col :span="12">
<DescriptionsItem label="合同编号">
{{ form.contractNumber }}
</DescriptionsItem>
</el-col>
<el-col :span="12">
<DescriptionsItem label="合同金额">
{{ form.amount | moneyFormat }}
</DescriptionsItem>
</el-col>
<el-col :span="12">
<DescriptionsItem label="状态">
{{ this.$parent.$parent.statusFormat(form) }} // 直接对父组件中的方法进行调用
</DescriptionsItem>
</el-col>
<el-col :span="12">
<DescriptionsItem label="签订日期">
{{ form.signDate }}
</DescriptionsItem>
</el-col>
<el-col :span="24">
<DescriptionsItem label="备注信息">
{{ form.remark }}
</DescriptionsItem>
</el-col>
<el-col :span="24">
<DescriptionsItem label="附件">
{{ form.userName }}
<FileList :list="form.fileList || []" />
</DescriptionsItem>
</el-col>
</el-row>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
</div>
</el-dialog>
</template>
其他两个没有进行测试,此处记录下用法
更多推荐
已为社区贡献1条内容
所有评论(0)