Vue.js Parent Call Child Component Method

Vue.js Parent Call Child Component Method

1. 单个定义的 ref ，使用 this.$refs.xxx 获取的是 一个组件的实例对象
2. 通过 v-for 循环后多个定义的 ref，使用 this.$refs.xxx 获取的是 一个组件的实例对象的数组

  methods: {
    clickRef(index) {
      const ref = `ref_${index}`;
      console.log("ref =", ref);
      console.log("this.$refs =", this.$refs);
      this.$refs[ref].log();
      /*
ref = ref_1 
this.$refs = 
{ref_1: VueComponent, ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref order = 
1
      */
    },
    clickTab(tab) {
      console.log("click tab =", tab);
      //
      const ref = `ks_ref_${tab}`;
      console.log("ref =", ref);
      console.log("this.$refs =", this.$refs);
      console.log("this.$refs[ref] =", this.$refs[ref]);
      console.log("this.$refs[`ks_ref_${tab}`] =", this.$refs[`ks_ref_${tab}`]);
      this.$refs[ref].log();
      // this.$refs[`ks_ref_${tab}`].log();
      /*
click tab = 
0
this.$refs = 
{ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref = ks_ref_0 
this.$refs[ref] = 
(1) [VueComponent]
this.$refs[`ks_ref_${tab}`] = 
(1) [VueComponent]
[Vue warn]: Error in v-on handler: "TypeError: this.$refs[ref].log is not a function"
TypeError: this.$refs[ref].log is not a function
      */
    },
  },

refs ??? object

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <section class="tab-box">
      <div class="tab">
        <button @click="clickRef(index)">ref {{ index }}</button>
        <Child :ref="`ref_${index}`" :order="index" />
      </div>
    </section>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "HelloWorld",
  components: {
    Child,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      index: 1,
      list: ["a", "b", "c"],
    };
  },
  methods: {
    clickRef(index) {
      const ref = `ref_${index}`;
      console.log("ref =", ref);
      console.log("this.$refs =", this.$refs);
      this.$refs[ref].log();
      /*
ref = ref_1 
this.$refs = 
{ref_1: VueComponent, ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref order = 
1
      */
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
.tab-box {
  width: 700px;
  height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.tab {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  background: #ccc;
  margin: 0 10px;
}
</style>

refs ??? array

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <section class="tab-box">
      <div class="tab" v-for="(key, i) in list" :key="key">
        <button @click="clickTab(i)">button {{ i }}</button>
        <Child :ref="`ks_ref_${i}`" :order="i" />
      </div>
    </section>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "HelloWorld",
  components: {
    Child,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      list: ["a", "b", "c"],
    };
  },
  methods: {
    clickTab(tab) {
      console.log("click tab =", tab);
      //
      const ref = `ks_ref_${tab}`;
      console.log("ref =", ref);
      console.log("this.$refs =", this.$refs);
      console.log("this.$refs[ref] =", this.$refs[ref]);
      console.log("this.$refs[`ks_ref_${tab}`] =", this.$refs[`ks_ref_${tab}`]);
      this.$refs[ref].log();
      // this.$refs[`ks_ref_${tab}`].log();
      /*
click tab = 
0
this.$refs = 
{ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref = ks_ref_0 
this.$refs[ref] = 
(1) [VueComponent]
this.$refs[`ks_ref_${tab}`] = 
(1) [VueComponent]
[Vue warn]: Error in v-on handler: "TypeError: this.$refs[ref].log is not a function"
TypeError: this.$refs[ref].log is not a function
      */
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
.tab-box {
  width: 700px;
  height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.tab {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  background: #ccc;
  margin: 0 10px;
}
</style>

<template>
  <div class="child">
    <h2>tab order = {{ order }}</h2>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    order: {
      type: Number,
      defualt: NaN,
    },
  },
  methods: {
    log() {
      console.log("ref order =", this.order);
      // typeof NaN;
      // "number"
    },
  },
};
</script>

<style scoped>
.child {
  color: #0f0;
}
</style>

Vue refs All In One

demo

https://codesandbox.io/s/vue-refs-all-in-one-if1r6

refs

https://code.luasoftware.com/tutorials/vuejs/parent-call-child-component-method/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---