vue ref和$refs获取组件实例

vue ref和$refs获取组件实例

**创建 工程：
H:\java_work\java_springboot\vue_study

ctrl按住不放 右键 悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day04\准备代码\15-ref和$refs获取组件实例

vue --version
vue create v-ref-zj-demo
cd v-ref-zj-demo

npm run serve

App.vue

<template>
  <div class="app">
    <h4>父组件 -- <button>获取组件实例</button></h4>
    <BaseForm ref="baseForm"></BaseForm>
    <button @click="handleGet">获取数据</button>
    <button @click="handleReset">重置数据</button>
  </div>
</template>

<script>
import BaseForm from "./components/BaseForm.vue";
export default {
  components: {
    BaseForm,
  },
  methods: {
    handleGet() {
      console.log(this.$refs.baseForm.getFormData());
    },
    handleReset() {},
  },
};
</script>

<style>
</style>

BaseForm.vue

<template>
  <div class="app">
    <div>账号: <input v-model="username" type="text" /></div>
    <div>密码: <input v-model="password" type="text" /></div>
    <div>
      <button @click="getFormData">获取数据</button>
      <button @click="resetFormData">重置数据</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "admin",
      password: "123456",
    };
  },
  methods: {
    getFormData() {
      console.log("获取表单数据", this.username, this.password);
      return {
        username: "admin",
        password: "123456",
      };
    },
    resetFormData() {
      this.username = "";
      this.password = "";
      console.log("重置表单数据成功");
    },
  },
};
</script>

<style scoped>
.app {
  border: 2px solid #ccc;
  padding: 10px;
}
.app div {
  margin: 10px 0;
}
.app div button {
  margin-right: 8px;
}
</style>