概述

Vue.js之$refs，父组件访问、修改子组件中 的数据

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。

ref 为子组件指定一个引用 ID，使父组件能通过 ref 直接访问子组件中的数据

 

子组件

<template>
  <div>
    <!--显示卡片表单-->
    <el-dialog
      title="卡片表单"
      :visible.sync="dvShowForm"
      :fullscreen="scShowFrom"
      :cardId="cardId"
      width="50%"
      :before-close="handleClose">
      <span>卡片【{{ cardId }}】表单，正在开发中......</span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "CardForm",
      props: {
        // dvShowForm: {
        //   type: Boolean,
        //   default: false
        // },
        // scShowFrom: {
        //   type: Boolean,
        //   default: false
        // },
        // cardId: {
        //   type: String,
        //   default: ''
        // }
      },
      data() {
        return {
            dvShowForm: false,
            scShowFrom: false,
            cardId: ''
        }
      },
      methods: {
        handleClose(done) {
          done();
        }
      }
    }
</script>

<style scoped>

</style>

 

父组件

......
      <card-form
        ref="cardForm"
        :dvShowForm="dvShowForm"
        :scShowFrom="scShowFrom"
        :cardId="cardId"
        width="50%"
      ></card-form>
......
      showForm(v) {
        // this.dvShowForm = true;
        // this.scShowFrom = true;
        // this.cardId = v;

        this.$refs.cardForm.dvShowForm = true;
        this.$refs.cardForm.scShowFrom = true;
        this.$refs.cardForm.cardId = v;

        this.$message('kanban.....showForm，正在开发中......' + v);
      }
......

说明：

    1）父组件在使用子组件标签中使用ref，用来引入子组件；

    2）在父组件的事件中访问子组件并修改子组件中的数据，采用this.$refs来操作