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
	是一个数组，可以操作当前组件的所有子组件

例子

1. 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: {}
    };
  },

2. 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>

其他两个没有进行测试,此处记录下用法

原文https://www.jianshu.com/p/8840c089d60a