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

  • Post author:
  • Post category:vue


概述

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来操作



版权声明:本文为shenzhen_zsw原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。